I have a variety of tables on my website, most of them without borders. However, I want to add borders to some of them. In my CSS, I am using a specific class for those tables:
table {
padding: 2px;
border-collapse: collapse;
table-layout: auto;
text-align: center;
display: block;
}
table.tableAllBorder tr td{
border-right: solid 1px;
border-left: solid 1px;
border-top: solid 1px;
border-bottom: solid 1px;
}
This approach works smoothly. But when I try to include 'th' within the definition, the CSS does not work correctly:
table.tableAllBorder tr td th{
border-right: solid 1px;
border-left: solid 1px;
border-top: solid 1px;
border-bottom: solid 1px;
}
What I ideally want is to simply use the attribute border="1" when defining my table. However, when I do this, I end up with a double border that extends beyond my table (see attached screenshot). Can you help?
<table border="1">
</table>
https://i.sstatic.net/WL1lU.png
Edit: Here is my CSS:
html, body {
background-color: rgb(var(--color5));
font-family: sans-serif;
-webkit-transition: height 0.3s;
-moz-transition: height 0.3s;
transition: height 0.3s;
}
.div1
{
margin-left: 40px;
overflow-x:auto;
width:auto;
}
table {
padding: 2px;
border-collapse: collapse;
table-layout: auto;
text-align: center;
display: block;
}
table tr:nth-child(odd) {
background-color: rgb(var(--color4));
}
table tr:nth-child(even) {
background-color: rgb(var(--color5));
}
table.tableAllBorder tr td th{
border-right: solid 1px rgb(var(--color1));
border-left: solid 1px rgb(var(--color1));
border-top: solid 1px rgb(var(--color1));
border-bottom: solid 1px rgb(var(--color1));
}
and here is my HTML code:
<div class="div1">
<table border="1" class="center">
<tr>
<th> ColA </th>
<th> ColB </th>
<th> ColC </th>
<th> ColD </th>
<th> ColE </th>
<th> ColF </th>
<th> ColG </th>
<th> ColH </th>
</tr>
</table>
</div>