I have implemented Twitter's Bootstrap to ensure a consistent design for my website. However, I am facing difficulties when trying to add a background to a table's thead tr. Below is the CSS code from Bootstrap:
.table-bordered {
border: 1px solid #ddd;
border-collapse: separate;
*border-collapse: collapsed;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.table-bordered thead:first-child tr:first-child th:first-child, .table-bordered tbody:first-child tr:first-child td:first-child {
-webkit-border-radius: 4px 0 0 0;
-moz-border-radius: 4px 0 0 0;
border-radius: 4px 0 0 0;
}
Here is my customized CSS:
tr.title
{
background-color: #2c2c2c;
background-image: -moz-linear-gradient(top, #333333, #222222);
background-image: -ms-linear-gradient(top, #333333, #222222);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#333333), to(#222222));
background-image: -webkit-linear-gradient(top, #333333, #222222);
background-image: -o-linear-gradient(top, #333333, #222222);
background-image: linear-gradient(top, #333333, #222222);
background-repeat: repeat-x;
}
And here is the relevant HTML snippet:
<thead>
<tr class="title">
<th colspan="5"><strong><a href="{$url}">{$name}</a></strong><br />{$description}</th>
</tr>
</thead>
The issue I am encountering is that the top left rounded corner disappears when the .title background is applied. It reappears once the background code is removed. How can I address this problem?