Menu
Using html tables in Firefox 24 to display information, I extensively use CSS to format lines and columns.
The problem I encounter is that I specified some borders for <td>, and a background-color for <tr>, but the tr's background color overlaps the td's borders.
Is it normal than tr styles are shown on top of td's ones ?
The two problems are :
class="ref" should correctly display a 2px right and left
border in .ann and .tbx rows (which isn't the case when tr background color is set)The first column right border should always be displayed too, even when the background color is set in the adjacent cells, cf.
div.tb tr td:first-child {
border-right: 1px solid black;
}
Here is a code sample (http://jsfiddle.net/RVJSD/):
CSS:
/* Default reset style sheet */
* {
margin: 0;
padding: 0;
position: relative;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
.tb {
font-family: Ubuntu;
font-size: small;
text-align: right;
}
div.tb tr td {
padding: 0 2px 0 2px;
}
div.tb tr td {
padding: 0 2px 0 2px;
}
div.tb tr td:not(:first-child) {
width: 92px;
}
div.tb tr td:first-child {
border-right: 1px solid black;
}
div.tb tr:not(:first-child) td:not(:first-child):not(.ref) {
border-right: 1px solid #b0b0b0;
}
div.tb tr td.ref { /* FIXME */
border-left: 2px solid black;
border-right: 2px solid black;
}
div.tb tr.ann {
background: #99CCFF;
font-size: 1.3em;
font-weight: bold;
text-align: center;
border-bottom: 1px solid black;
}
div.tb tr.ann td {
height: 2.5em;
}
div.tb tr.ann td:first-child {
background: white;
font-size: small;
font-weight: bold;
text-align: right;
}
div.tb tr.ann td.ref {
background: green;
color: white;
}
div.tb tr.txb {
background: #99CCFF;
font-weight: bold;
}
HTML:
<body>
<div class="tb">
<table>
<thead/>
<tbody>
<tr class="ban"><td>Barfoo</td><td>Bar</td><td>Blah</td><td>Foobar</td><td>FooBlah</td><td>BlahBar</td><td>Foo</td></tr>
<tr class="ann"><td>ann</td><td>13</td><td>9</td><td class="ref">13</td><td>12</td><td>9</td><td>15</td></tr>
<tr class="nbr"><td>nbr</td><td>-34</td><td>20</td><td class="ref">15</td><td>18</td><td>123</td><td>12</td></tr>
<tr class="txb"><td>txb</td><td>2,83%</td><td>3,38%</td><td class"ref">3,84%</td><td>3,21%</td><td>3,52%</td><td>3,27%</td></tr>
</tbody>
</table>
</div>
</body>
If possible, I'd like to keep the setting border-collapse:collapse (and not separate) like so :
table {
border-collapse: collapse;
border-spacing: 0;
}
and I don't like the Table Border Overlap solution as the div adds additional border width and make the code less legible.
405
To change the border's color, use the attribute bordercolor="color" where color is the same format as all the other web colors we've been using. The table below has the bordercolor set to #ff00ff with the table tag <table bordercolor="#ff00ff">. To change the background color, use the attribute bgcolor="color".
To set the background color in HTML, use the style attribute. The style attribute specifies an inline style for an element. The attribute is used with the HTML <body> tag, with the CSS property background-color. HTML5 do not support the <body> tag bgcolor attribute, so the CSS style is used to add background color.
Your stylesheet styles everything with position: relative. This causes every cell to be its own stacking context and to paint its background and the background of its row and table over the borders of earlier cells if they overlap (which in the collapsed border model they do). And since you're putting all the borders on the right of the cells (as in, depending on the border of the earlier cell showing through), things fail.
Note that per spec the behavior here is not undefined; CSS (as of version 2.1, at least) does not define what happens when you relatively position table cells.
138
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
