web-dev-qa-db-ja.com

境界半径HTMLテーブル

私はいくつかの丸い角を私のテーブルに適用しようとしましたが、私はちょうどそれを正しくすることができないようです。 <thead>をクリックします。 <thead>上部の丸いコーナーのみが必要で、最後の<tr>要素には、角の丸い底面のみが必要です。フレームワークとしてbootstrap=を使用しています。

現在、私のデザインは次のようになっています。

Current header

Current last element

<head>次のようになります。

enter image description here

一方、最後の要素の底は丸い角になっています。

table.html

<table align="center" class="table table-curved" id="nextTeamTable">
    <thead data-parent="#bodyContainer" data-toggle="collapse" data-target="#tbodyCollapse">
        <tr>
            <th>HeadTitle</th>
        </tr>
    </thead>
    <tbody class="collapse" id="tbodyCollapse">
        <tr>
            <td>Body1</td>
            <td>Body2</td>
            <td>Body3</td>
        </tr>
    </tbody>
</table>

table.css

.table-curved {
    border-collapse:separate;
    border: solid #ccc 1px;
    border-radius: 25px;
}

.table-curved tr:last-child td
{
    border-bottom-left-radius: 25px;    
    border-bottom-right-radius: 25px;   
}
htmlcsstwitter-bootstrapcss3
26
Niels Sønderbæk

[〜＃〜] edit [〜＃〜]-これを試してください：overflow:hidden上の.tabled-curved とともに border-radius: 25px;。次に、残りのborder-radius CSSを削除します

44
Mike Barwick