Hi,
I have customized table css code so that tables appear with rounded corners and with some additional formating. The code work nicely on product page short tables but on the shipping policy page where tables are longer the top border line on the header row has disappeared. Could you help to figure out why it disappeared and how to fix it?
On product page:
On the shipping policy page:
The table CSS:
table {
border-collapse: separate;
border-spacing: 0;
min-width: 350px;
margin: 25px 0;
font-size: 0.9em;
min-width: 400px;
width: 100%;
overflow: auto;
}
table tr th,
table tr td {
border-right: thin solid #bbb;
border-bottom: thin solid #bbb;
padding: 6px;
}
table tr th:first-child {
border-left: thin solid #bbb;
border-top: thin solid #bbb;
}
table tr td:first-child {
border-left: thin solid #bbb;
}
table tr th {
background: #eee;
border-top: thin solid #bbb;
}
table tr:nth-of-type(odd) {background-color: #f7f7f7;}
table tr:hover {background-color: #f3f3f3;}
/* top-left border-radius */
table tr:first-child th:first-child {
border-top-left-radius: 6px;
}
/* top-right border-radius */
table tr:first-child th:last-child {
border-top-right-radius: 6px;
}
/* bottom-left border-radius */
table tr:last-child td:first-child {
border-bottom-left-radius: 6px;
}
/* bottom-right border-radius */
table tr:last-child td:last-child {
border-bottom-right-radius: 6px;
}
