While working on one of the data tables, I came across a styling problem of table border. The layout needed a table with an outer border of 1px with a darker color and the cells with different color.
In traditional table styling, it is quite difficult by just giving “solid” border for table, th and td.
So I tried with this code, which works without cross-browser issue:
table {
width: 100%;
border-collapse: collapse;
border: 1px solid #b4b4b4;
color: #666;
}
table th {
padding: 8px 10px;
border: 1px inset #eee;
border-bottom: none;
background: #dfdfdf none;
}
table td {
padding: 8px 10px;
border: 1px inset #eee;
border-top: none;
}
tr.alt td { background: #fafafa; }
Here is the demo.