Firefox does not render table cell borders correctly when a table has an empty tbody.
But if you use the pseudo selector tbody:empty {display:none;} to hide the tbody element, everything is rendered as expected.
jsfiddle
table {
border-collapse: collapse;
}
th,
td {
border: 1px solid #000;
}
.fixed tbody:empty {
display: none;
}
<table class="broken">
<thead>
<tr>
<th>1</th>
<td>2</td>
<td>3</td>
</tr>
</thead>
<tbody></tbody>
<tfoot>
<tr>
<th>1</th>
<td>2</td>
<td>3</td>
</tr>
</tfoot>
</table>
<hr />
<table class="fixed">
<thead>
<tr>
<th>1</th>
<td>2</td>
<td>3</td>
</tr>
</thead>
<tbody></tbody>
<tfoot>
<tr>
<th>1</th>
<td>2</td>
<td>3</td>
</tr>
</tfoot>
</table>
It most likely belongs to Bug 409254 and Bug 217769 on Firefox.
Side note: Although an empty tbody is valid in HTML 5, but the number of the cells in each row group should be matched (except using colspan) in one table.
A workaround would be drawing the borders separately on both the table and cell elements.
table {
border-collapse: separate; /*changed from collapse*/
border-spacing: 0;
border: 1px solid;
border-width: 0 0 1px 1px; /*draw bottom and left borders*/
}
th,
td {
border: 1px solid;
border-width: 1px 1px 0 0; /*draw top and right borders*/
}
jsfiddle
Related
When using border-top with border-collapse, the last row of table becomes smaller in height by border-width / 2 pixels. For example, with 2px border, the last row is 1px smaller; with 10px border, it is 5px smaller and so on...
Why does this happen and how can I fix it?
/* Just for styling. Writes each cell's height in it. */
document.querySelectorAll('td')
.forEach((cell) => {
cell.innerHTML = cell.offsetHeight + "px";
});
table {
border-collapse: collapse;
}
.t1 tr {
border-top: solid 2px black;
}
.t2 tr {
border-top: solid 100px black;
}
/* Just for styling */
td {
padding: 12px 40px;
color: white;
}
<h2>2px border</h2>
<table class="t1">
<tr style="background: cornflowerblue">
<td></td>
</tr>
<tr style="background: brown">
<td></td>
</tr>
<tr style="background: olive">
<td></td>
</tr>
</table>
<h2>100px border</h2>
<table class="t2">
<tr style="background: cornflowerblue">
<td></td>
</tr>
<tr style="background: brown">
<td></td>
</tr>
<tr style="background: olive">
<td></td>
</tr>
</table>
Update
The problem shows itself when you want to sort columns.
In a normal, static table, that 1px isn't a huge deal; nobody will notice it. But when you want to change the order of rows (by sorting), there is a "jump".
Let's say I've a list of data in table.
Is there any way to achieve the below format using CSS?
I tried the below CSS but not the correct one:
table tr td:nth-child(2){ border-top: solid 1px #ccc; }
Here's my example
https://codepen.io/w3nta1/pen/QrzVgb
You could give a try to extend the border via an absolute pseudo element:
table {
border: none;
border-spacing:0;
width:200px;
overflow:hidden;/* hide pseudo overflowing */
}
table tr td + td {
border-top: solid 1px #ccc;
position:relative;/* make it the coordonates reference for the absolute positionned pseudo */
}
table tr td + td:before {
content:'';
position:absolute;
width:100%;
right:100%;
top:-1px;/* climb up the size of parent's border */
border-top: inherit;/* draw same border */
}
<table>
<tbody>
<tr>
<td>01</td>
<td rowspan="3">ABC</td>
</tr>
<tr>
<td>02</td>
</tr>
<tr>
<td>03</td>
</tr>
<tr>
<td>04</td>
<td>DEF</td>
</tr>
<tr>
<td>05</td>
<td>GHI</td>
</tr>
<tr>
<td>06</td>
<td rowspan="2">JKL</td>
</tr>
<tr>
<td>07</td>
</tr>
<tr>
<td>08</td>
<td>MNO</td>
</tr>
<tr>
<td>09</td>
<td>PQR</td>
</tr>
<tr>
<td>10</td>
<td rowspan="2">STU</td>
</tr>
<tr>
<td>11</td>
</tr>
<tr>
<td>12</td>
<td>VWX</td>
</tr>
<tr>
<td>13</td>
<td>YZ</td>
</tr>
</tbody>
</table>
https://codepen.io/gc-nomade/pen/wjRYqg
you can use only this css for look like you want table
table tr td + td {
border-top: solid 1px #ccc;
position:relative;
}
table tr td + td:before {
content:'';
position:absolute;
width:100%;
right:100%;
top:-1px;
border-top: solid 1px #ccc;
}
I'm trying to fill black color between vertical cell spacing(columns) of a table in html but can't figure it out how to do it. Here is my code
table,
th,
td {
border-collapse: separate;
border-spacing: 2px;
border-style: solid;
border-width: thin;
}
<table>
<tr>
<th>Heading One</th>
<th>Heading Two</th>
<th>Heading Three</th>
</tr>
<tr>
<td>Apple</td>
<td>10</td>
<td>$1.0</td>
</tr>
<tr>
<td>Mango</td>
<td>12</td>
<td>$2.0</td>
</tr>
</table>
Best way to do this would be to add a background color to the table and a foreground color to the fields. See below
table, th, td
{
border-collapse: separate;
border-spacing:2px;
border-style: solid;
border-width:thin;
}
table{background:#000;}
tr{background: #fff;}
<table>
<tr><th>Heading One</th>
<th>Heading Two </th>
<th>Heading Three </th>
</tr>
<tr>
<td>Apple</td>
<td>10</td>
<td>$1.0</td>
</tr>
<tr>
<td>Mango</td>
<td>12</td>
<td>$2.0</td>
</tr>
</table>
The space between the cells is the table. You change the background of the table in the same way as any other element.
Watch out, the default background colour of the table cells is transparent.
table,
th,
td {
border-collapse: separate;
border-spacing: 2px;
border-style: solid;
border-width: thin;
}
table {
background-color: black;
}
td, th {
background-color: white;
}
<table>
<tr>
<th>Heading One</th>
<th>Heading Two</th>
<th>Heading Three</th>
</tr>
<tr>
<td>Apple</td>
<td>10</td>
<td>$1.0</td>
</tr>
<tr>
<td>Mango</td>
<td>12</td>
<td>$2.0</td>
</tr>
</table>
From another approach, the border-collapse doesn't have to be separated, collapse value also works. The size of the border can be changed by changing the value of border-width.
table,
th,
td {
border-collapse: collapse;
border-width: 4px;
border-style: solid;
border-color: #000;
}
tr{background: #eee;}
<table>
<tr>
<th>Heading One</th>
<th>Heading Two</th>
<th>Heading Three</th>
</tr>
<tr>
<td>Apple</td>
<td>10</td>
<td>$1.0</td>
</tr>
<tr>
<td>Mango</td>
<td>12</td>
<td>$2.0</td>
</tr>
</table>
Updated on May 13th, 2021
As I have read through the book CSS Mastery Advanced Web Standards Solution, 3rd 3, the book has mentioned in ch9 that using border-collapse: collapse; can result empty spacing on vertical border using IE/Edge.
Add the below css and try,
table, th, td
{
border-collapse: separate;
border-spacing:2px;
border-style: solid;
border-width:thin;
background-color:White;
}
table
{
background-color:Black;
}
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I would like to create HTML table like this example.
How I can preserve the header gray and make the data to look like the same way?
Here is a working snippet.
border-spacing removes the spacing between cells
tr:first-of-type targets only the first row to apply background color
td:nth-child(odd) targets only the first column to make all fields bold
table{
border-spacing:0;
}
tr:first-of-type{
background:lightgray;
}
td:nth-child(odd){
font-weight:bold;
}
th,td{
padding:5px;
}
<table>
<tr>
<td>Plan / Feature</td>
<td>Standard</td>
</tr>
<tr>
<td>Plan Type</td>
<td>Annual</td>
</tr>
<tr>
<td>Email Support</td>
<td>Yes</td>
</tr>
</table>
Try this:
CSS:
table {
border-collapse: collapse;
}
table th, table thead tr {
background: #ccc;
font-weight: bold;
}
table tr td:first-child {
font-weight: bold;
}
table tr td {
background-color: transparent;
}
Example HTML:
<table>
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Column 1</td>
<td>Column 2</td>
</tr>
<tr>
<td>Column 1</td>
<td>Column 2</td>
</tr>
</tbody>
</table>
JSFiddle
You can style the header of a table with css
<table>
<tr>
<th>header</th>
<th>header</th>
</tr>
<tr>
<td>content</td>
<td>content</td>
</tr>
</table>
th { background-color: #ff0000; }
Or see this fiddle: http://jsfiddle.net/h4817knp/6/
Edit: To avoid the gaps in the header add
table { border-collapse: collapse; }
to the css
http://jsfiddle.net/1yn99g13/1/
You just set the background colour on the elements you want it to appear on.
There's nothing complicated about this.
table, tbody, tr, th, td { background: transparent; }
thead { background: #aaa; }
You should, of course, use CSS:
You need to get rid of the default spacing in the table:
table {
border-collapse: collapse;
border-spacing: 0;
}
You need to set the background color of the table head element:
table thead {
background-color: lightgrey;
}
You need to define your cell sizes:
td {
width: 100px;
height: 25px;
}
Working Fiddle
table {
border-collapse: collapse;
border-spacing: 0;
}
td {
width: 100px;
height: 25px;
}
table thead {
background-color: lightgrey;
}
<table>
<thead>
<tr>
<td>HeaderA</td>
<td>HeaderB</td>
</tr>
</thead>
<tbody>
<tr>
<td>Item 1</td>
<td>Value</td>
</tr>
</tbody>
</table>
As you can see in this fiddle, http://jsfiddle.net/S8Bne/64/, I am trying to draw a box shadow around the table (just the outside out it). The approach that I've taken is to create a div with slightly larger height than the thead area and give it a box shadow. However, I can't quite get it positioned properly. How can I do so?
Any solutions are welcome.
This is happening because your thead is not inside the div.
I added some height to the div to show...
Problem: http://jsfiddle.net/jasongennaro/S8Bne/54/
Add this
-webkit-box-shadow:#8A0000 2px 2px 10px;
box-shadow:#8A0000 2px 2px 10px;
to
.geniusPicks table tr#picksHeading th
And it works.
Working Example: http://jsfiddle.net/jasongennaro/S8Bne/55/
So no need for the div
If you want to add shadow to thead without using div, try the following code
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
table thead{
display:block;
position:relative;
box-shadow: 0px 1px 3px 0px #cccccc;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
table tr{
display:table;
table-layout:fixed;
width:100%;
}
<table>
<thead>
<tr>
<th>Company</th>
<th>Owner</th>
<th>Country</th>
</tr>
</thead>
<tbody>
<tr>
<td>Alfred Trading</td>
<td>Alfred Thomas</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
<tr>
<td>Ernst Handel</td>
<td>Roland Mendel</td>
<td>Australia</td>
</tr>
<tr>
<td>Island Trading</td>
<td>Helena Bennett</td>
<td>UK</td>
</tr>
<tr>
<td>Laughing Bacchus</td>
<td>John Cook</td>
<td>Canada</td>
</tr>
<tr>
<td>Magazzini Alimentari Riuniti</td>
<td>Giovanni Rovelli</td>
<td>Italy</td>
</tr>
</tbody>
</table>