Looking to create webpages that have a variety of tables, including a main table with a header (marked 2 on the picture) and several data tables for the user (marked 1 on the picture). To style these specific data tables, I've added some custom CSS:
.datatable {
border-collapse: collapse; /* hides double lines between cells */
border: 2px solid white; /* hides table borders */
}
.datatable th, td
{
padding: 5px 10px;
border: 1px solid black; /* adds border for th and td */
}
.datatable th {
background-color: #EBECEC;
font-weight: bold;
vertical-align: bottom;
}
.datatable tr:nth-child(odd) {
background-color: #EBECEC;
}
The tables styled with .datatable look good in the browser. However, the main table containing these data tables also has borders around its cells, which were not present before (due to the border="0" property). How can I fix this issue and control the properties of the main table?
It seems like the browser is inheriting the styles from the .datatable class and applying them to the upper-level table or cells. Any suggestions on how to resolve this would be appreciated.
You can view the codepen here: https://codepen.io/gzbqqfbl-the-encoder/pen/QWqrBxP