背景を丸くしてコーナーをつける[CSS/Twitterのブートストラップ]

Question

私は、TwitterのBootstrapを使って私のサイトに一貫した見た目を与えています。テーブルのthead trにバックグラウンドを追加すると問題にぶつかります。ここでは、ブートストラップからCSSです：

.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

あなたが国境半径を再定義する必要が
、丸みを帯びた角を失う：

例：

あなたがパネルにあなたのテーブルを配置する必要があり、ブートストラップ3.0で

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

Answer 2

。

HTML：

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

CSS：

.backgrounded thead { 
    background: #499bea;  
}