In my CSS stylesheet below, ".b1" doesn't work if it's after ".table".
What is the reason for this? Is there a rule to the order in the CSS stylesheet?
Thanks much
.b1 {
border-bottom: 1px solid black;
}
.table td:first-child {
text-align: left;
}
<table class="table">
<tbody>
<tr>
<td class="b1">Item</td>
</tr>
</tbody>
</table>
EDIT: Strange it seems to work. Thanks everyone for your help. Not sure if it is because I restarted my computer or a software issue.
.table .b1 {
// whatever
}
that will work because .b1 class is nested below the table element. You are trying that it is not working for you?
Firstly, I would recommend making the code a bit more readable.
Second, I added some more code, so that you can see that the first child is taking the style with a background of red. You can remove it later, but it helps for testing purposes. Try this out:
table td:first-child {text-align: left; background-color: red;}
.b1 {border-bottom: 5px solid black; }
<table class="table">
<tbody>
<tr>
<td class="b1">Item </td>
<td class="b1">Item 2 </td>
<td class="b1">Item 3 </td>
</tr>
</tbody>
</table>
Related
My goal is to make an HTML page that is similar to a "photo frame". In other words, I want to make a blank page that is surrounded by 4 pictures.
This is my code:
<table>
<tr>
<td class="bTop" colspan="3">
</td>
</tr>
<tr>
<td class="bLeft">
</td>
<td class="middle">
</td>
<td class="bRight">
</td>
</tr>
<tr>
<td class="bBottom" colspan="3">
</td>
</tr>
</table>
And the CSS classes are the following:
.bTop
{
width: 960px;
height: 111px;
background-image: url('../Images/BackTop.jpg');
}
.bLeft
{
width: 212px;
height: 280px;
background-image: url('../Images/BackLeft.jpg');
}
.middle
{
width: 536px;
height: 280px;
}
.bRight
{
width: 212px;
height: 280px;
background-image: url('../Images/BackRight.jpg');
}
.bBottom
{
width: 960px;
height: 111px;
background-image: url('../Images/BackBottom.jpg');
}
My problem is that I am getting thin white lines between the cells of the table, I mean that the border of pictures is not continuous. How can I avoid these white spaces?
<table cellspacing="0" cellpadding="0">
And in css:
table {border: none;}
EDIT:
As iGEL noted, this solution is officially deprecated (still works though), so if you are starting from scratch, you should go with the jnpcl's border-collapse solution.
I actually quite dislike this change so far (don't work with tables that often). It makes some tasks bit more complicated. E.g. when you want to include two different borders in same place (visually), while one being TOP for one row, and second being BOTTOM for other row. They will collapse (= only one of them will be shown). Then you have to study how is border's "priority" calculated and what border styles are "stronger" (double vs. solid etc.).
I did like this:
<table cellspacing="0" cellpadding="0">
<tr>
<td class="first">first row</td>
</tr>
<tr>
<td class="second">second row</td>
</tr>
</table>
----------
.first {border-bottom:1px solid #EEE;}
.second {border-top:1px solid #CCC;}
Now, with border collapse, this won't work as there is always one border removed. I have to do it in some other way (there are more solutions ofc). One possibility is using CSS3 with box-shadow:
<table class="tab">
<tr>
<td class="first">first row</td>
</tr>
<tr>
<td class="second">second row</td>
</tr>
</table>
<style>
.tab {border-collapse:collapse;}
.tab .first {border-bottom:1px solid #EEE;}
.tab .second {border-top:1px solid #CCC;box-shadow: inset 0 1px 0 #CCC;}
</style>
You could also use something like "groove|ridge|inset|outset" border style with just a single border. But for me, this is not optimal, because I can't control both colors.
Maybe there is some simple and nice solution for collapsing borders, but I haven't seen it yet and I honestly haven't spent much time on it. Maybe someone here will be able to show me/us ;)
table {
border-collapse: collapse;
}
For me I needed to do something like this to completely remove the borders from the table and all cells. This does not require modifying the HTML at all, which was helpful in my case.
table, tr, td {
border: none;
}
In a bootstrap environment none of the top answers helped, but applying the following removed all borders:
.noBorder {
border:none !important;
}
Applied as:
<td class="noBorder">
In a bootstrap environment here is my solution:
<table style="border-collapse: collapse; border: none;">
<tr style="border: none;">
<td style="border: none;">
</td>
</tr>
</table>
This is what resolved the problem for me:
In your HTML tr tag, add this:
style="border-collapse: collapse; border: none;"
That removed all the borders that were showing on the table row.
Using TinyMCE editor, the only way I was able to remove all borders was to use border:hidden in the style like this:
<style>
table, tr {border:hidden;}
td, th {border:hidden;}
</style>
And in the HTML like this:
<table style="border:hidden;"</table>
Cheers
Use this Css style in your global CSS
.table,
.monthview-datetable td,
.monthview-datetable th {
border: none !important;
}
table {
border: none;
}
You can user this css property to hide table border.
Nothing of the answers here worked in 2022 (at least for Chrome) except <table cellspacing="0" cellpadding="0">. However I needed a CSS solution, not the HTML one. So here it is:
table,
thead,
tbody,
tfoot,
tr,
th,
td {
padding: 0;
border-spacing: 0;
}
padding is the CSS synonym for HTML cellpadding and border-spacing is respectively for cellspacing. Not quite an obvious thing though.
Given:
<table>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<table>
Using this on your CSS would work:
tr {
border: transparent 1px solid;
}
I found border-spacing to be my issue
td, th, tr, table {
border: 0 !important;
border-spacing:0 !important;
}
Excuse my CSS ignorance here.
I'm trying to apply a background color to a row using the following css:
tbody tr:hover {
background-color: #F69;
border: thin solid black;
}
The HTML table has some inherent column colors like shown below. The CSS above will not change the color to #F69 and keep the colors #993300. Is there a way to override this HTML cell coloring?
tbody tr:hover {
background-color: #F69;
border: thin solid black;
}
<table>
<tr>
<th>11 lbs</th>
<td></td>
<td bgcolor="#993300">1</td>
<td bgcolor="#993300">2</td>
<td bgcolor="#993300">3</td>
<td> </td>
</tr>
</table>
I think you are want something like this-
tr td:hover {
background-color: #F69;
border: thin solid black;
}
<table width="100%">
<tr>
<th colspan="5">11 lbs</th>
</tr>
<tr>
<td width="20%"> </td>
<td width="20%" bgcolor="#993300"></td>
<td width="20%" bgcolor="#993300"></td>
<td width="20%" bgcolor="#993300"></td>
<td width="20%"> </td>
</tr>
</table>
I hope it will helps you.
I'm trying to apply a background color to a row using the...
If I read your question correctly, and considering that you have both th and td elements in your table, it seems like you are trying to change the background-color of the row's child elements at the same time when hovering over the row.
If that's the case, then this is your solution:
tr:hover td,
tr:hover th {
background-color: #F69;
border: thin solid black;
}
All of the row cells will be highlighted on hover.
Otherwise, if you are trying to change the background-color one cell at a time, I recommend Maddy's answer.
Try it Online!
I am trying to create a border on top of another element's border.
I have something like the following
html
<table class='table'>
<tr>
<td>123</td>
<td class="pick">123</td>
<td>123</td>
</tr>
<tr>
<td class="second" style="text-align:center;" colspan='3'>123</td>
</tr>
</table>
css
.pick {
border-bottom:solid 5px green;
}
.second {
border:solid 5px red !important;
background-color: green;
}
http://jsfiddle.net/j8zt8sb3/1/
Basically I want to create a gap look for the <td> that has a class 'pick'. Everything works fine on every browser but the red border will cover the green border in IE which means there is no gap. Is there anyways to fix this? Thanks a lot!
Just add this property:
table {
border-collapse: collapse;
}
I have following code in website:
<table width="70%" cellpadding="0" cellspacing="0" align="center"><tr>
<td >Home</td>
<td>About Us</td>
<td>Services</td>
<td>Gallary</td>
<td>Contact Us</td>
<td>Enquiry</td>
</tr>
</table><br/>
I want to add border-right in each menu with equal space. How can I do this?
I believe this CSS is what you're asking for:
td
{ border-right: solid 1px black;
text-align: center;
}
td:last-child
{ border-right: none; }
Check out this JSFiddle. Note that the td:last-child selector won't work in all browsers.
However, you should really move away from using tables as layout elements.
My goal is to make an HTML page that is similar to a "photo frame". In other words, I want to make a blank page that is surrounded by 4 pictures.
This is my code:
<table>
<tr>
<td class="bTop" colspan="3">
</td>
</tr>
<tr>
<td class="bLeft">
</td>
<td class="middle">
</td>
<td class="bRight">
</td>
</tr>
<tr>
<td class="bBottom" colspan="3">
</td>
</tr>
</table>
And the CSS classes are the following:
.bTop
{
width: 960px;
height: 111px;
background-image: url('../Images/BackTop.jpg');
}
.bLeft
{
width: 212px;
height: 280px;
background-image: url('../Images/BackLeft.jpg');
}
.middle
{
width: 536px;
height: 280px;
}
.bRight
{
width: 212px;
height: 280px;
background-image: url('../Images/BackRight.jpg');
}
.bBottom
{
width: 960px;
height: 111px;
background-image: url('../Images/BackBottom.jpg');
}
My problem is that I am getting thin white lines between the cells of the table, I mean that the border of pictures is not continuous. How can I avoid these white spaces?
<table cellspacing="0" cellpadding="0">
And in css:
table {border: none;}
EDIT:
As iGEL noted, this solution is officially deprecated (still works though), so if you are starting from scratch, you should go with the jnpcl's border-collapse solution.
I actually quite dislike this change so far (don't work with tables that often). It makes some tasks bit more complicated. E.g. when you want to include two different borders in same place (visually), while one being TOP for one row, and second being BOTTOM for other row. They will collapse (= only one of them will be shown). Then you have to study how is border's "priority" calculated and what border styles are "stronger" (double vs. solid etc.).
I did like this:
<table cellspacing="0" cellpadding="0">
<tr>
<td class="first">first row</td>
</tr>
<tr>
<td class="second">second row</td>
</tr>
</table>
----------
.first {border-bottom:1px solid #EEE;}
.second {border-top:1px solid #CCC;}
Now, with border collapse, this won't work as there is always one border removed. I have to do it in some other way (there are more solutions ofc). One possibility is using CSS3 with box-shadow:
<table class="tab">
<tr>
<td class="first">first row</td>
</tr>
<tr>
<td class="second">second row</td>
</tr>
</table>
<style>
.tab {border-collapse:collapse;}
.tab .first {border-bottom:1px solid #EEE;}
.tab .second {border-top:1px solid #CCC;box-shadow: inset 0 1px 0 #CCC;}
</style>
You could also use something like "groove|ridge|inset|outset" border style with just a single border. But for me, this is not optimal, because I can't control both colors.
Maybe there is some simple and nice solution for collapsing borders, but I haven't seen it yet and I honestly haven't spent much time on it. Maybe someone here will be able to show me/us ;)
table {
border-collapse: collapse;
}
For me I needed to do something like this to completely remove the borders from the table and all cells. This does not require modifying the HTML at all, which was helpful in my case.
table, tr, td {
border: none;
}
In a bootstrap environment none of the top answers helped, but applying the following removed all borders:
.noBorder {
border:none !important;
}
Applied as:
<td class="noBorder">
In a bootstrap environment here is my solution:
<table style="border-collapse: collapse; border: none;">
<tr style="border: none;">
<td style="border: none;">
</td>
</tr>
</table>
This is what resolved the problem for me:
In your HTML tr tag, add this:
style="border-collapse: collapse; border: none;"
That removed all the borders that were showing on the table row.
Using TinyMCE editor, the only way I was able to remove all borders was to use border:hidden in the style like this:
<style>
table, tr {border:hidden;}
td, th {border:hidden;}
</style>
And in the HTML like this:
<table style="border:hidden;"</table>
Cheers
Use this Css style in your global CSS
.table,
.monthview-datetable td,
.monthview-datetable th {
border: none !important;
}
table {
border: none;
}
You can user this css property to hide table border.
Nothing of the answers here worked in 2022 (at least for Chrome) except <table cellspacing="0" cellpadding="0">. However I needed a CSS solution, not the HTML one. So here it is:
table,
thead,
tbody,
tfoot,
tr,
th,
td {
padding: 0;
border-spacing: 0;
}
padding is the CSS synonym for HTML cellpadding and border-spacing is respectively for cellspacing. Not quite an obvious thing though.
Given:
<table>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<table>
Using this on your CSS would work:
tr {
border: transparent 1px solid;
}
I found border-spacing to be my issue
td, th, tr, table {
border: 0 !important;
border-spacing:0 !important;
}