Добавление фона покрывает закругленный угол [CSS / Twitter's Bootstrap]

Question

Я использую Twitter * Bootstrap , чтобы придать своему сайту неповторимый вид, и у меня возникают проблемы, когда я добавляю фон к thead tr таблицы. Вот CSS из 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;
}

Вот мой 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;
}

и соответствующий HTML:

<thead>
<tr class="title">
<th colspan="5"><strong><a href="{$url}">{$name}</a></strong><br />{$description}</th>
</tr>
</thead>

Проблема в том, что верхний левый закругленный угол удаляется с фоном .title. Когда я удаляю фоновый код, он возвращается. Как я могу это исправить?

Answer 1

В Bootstrap 3.0 вам нужно поместить таблицу в панель.

HTML:

<div class="panel panel-primary">
    <table class="backgrounded table">
        <thead>
        ....
<thead></table></div>

CSS:

.backgrounded thead {
   background: #499bea;    
}

Answer 2

Когда вы устанавливаете фоновое изображение, вы теряете скругленные углы,
вы должны переопределить радиус границы:

Пример:

.modal-header {
    cursor: pointer;
    background-image: url('myimg.jpg');
    border-radius: 6px 6px 0 0;
}