58

Bootstrap 3 では、テーブルの角が丸くなっています。.table-borderedクラスを適用したときに元に戻すには、どのスタイルを適用すればよいですか?

アップデート

これまでのところ、このコードに到達しましたが、効果はありません。

Bootstrap 2.3.2 から取得した CSS:

.table-bordered
{
    -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, .table-bordered tbody:first-child tr:first-child > th:first-child
{
    -webkit-border-top-left-radius: 4px;
    border-top-left-radius: 4px;
    -moz-border-radius-topleft: 4px;
}

.table-bordered thead:last-child tr:last-child > th:first-child, .table-bordered tbody:last-child tr:last-child > td:first-child, .table-bordered tbody:last-child tr:last-child > th:first-child, .table-bordered tfoot:last-child tr:last-child > td:first-child, .table-bordered tfoot:last-child tr:last-child > th:first-child
{
    -webkit-border-bottom-left-radius: 4px;
    border-bottom-left-radius: 4px;
    -moz-border-radius-bottomleft: 4px;
}

HTML コード:

<table class="table table-hover table-responsive table-bordered">
    <thead>
        <tr>
            <th style="width: 50%">
                Config. Name
            </th>
            <th>
                API Calls
            </th>
            <th>
                Current Amount
            </th>
            <th>
                Actions
            </th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <a href="/searchsources/details">Agennda</a>
            </td>
            <td>
                2,876
            </td>
            <td>
                $ 80.67
            </td>
            <td>
                <a href="/searchsources/details">Edit</a>
            </td>
        </tr>
    </tbody>
</table>
4

11 に答える 11

153

テーブルをパネルで囲むと、角が丸くなります。

このような：

<div class="panel panel-default">
    <table class="table table-bordered">
        ....
    </table>
</div>
于 2014-01-03T12:16:38.907 に答える
28

「テーブルレスポンシブ」は、テーブル自体ではなく、テーブルをラップする div に適用されます。

normalize.less には、border-collapse:collapse を含むテーブルのリセットがあります。これは、Bootstrap の 2.x にはありませんでした。この新しいリセットにより、border-collapse:separate である必要があるため、丸みを帯びた角はありません。別のクラスを作成し、それに応じて設定する必要があります。

       <table class="table table-curved">

"table-hover" および "table-striped" でのみ動作し、テーブル境界ではありません。ボーダーはこのスタイルに含まれています。

.table-curved {
    border-collapse: separate;
}
.table-curved {
    border: solid #ccc 1px;
    border-radius: 6px;
    border-left:0px;
}
.table-curved td, .table-curved th {
    border-left: 1px solid #ccc;
    border-top: 1px solid #ccc;
}
.table-curved th {
    border-top: none;
}
.table-curved th:first-child {
    border-radius: 6px 0 0 0;
}
.table-curved th:last-child {
    border-radius: 0 6px 0 0;
}
.table-curved th:only-child{
    border-radius: 6px 6px 0 0;
}
.table-curved tr:last-child td:first-child {
    border-radius: 0 0 0 6px;
}
.table-curved tr:last-child td:last-child {
    border-radius: 0 0 6px 0;
}

以下

  //  Added Rounded Corner Tables 
.table-curved {
  border-collapse: separate;
  border: solid @table-border-color 1px;
  border-radius: @table-radius;
  border-left:0px;

    td, th {
      border-left: 1px solid @table-border-color;
      border-top: 1px solid @table-border-color;
    }

    th {
      border-top: none;
    }

    th:first-child {
      border-radius: @table-radius 0 0 0;
    }

    th:last-child {
      border-radius: 0 @table-radius 0 0;
    }

    th:only-child{
      border-radius: @table-radius @table-radius 0 0;
    }

    tr:last-child td:first-child {
      border-radius: 0 0 0 @table-radius;
    }

    tr:last-child td:last-child {
      border-radius: 0 0 @table-radius 0;
    }
}
于 2013-09-17T21:10:57.740 に答える
4

ソースのless-filesを使用していないと思います。ただし、normalize.less では、bootstrap 3.0RC が以下を追加しています。

// ==========================================================================
// Tables
// ==========================================================================

//
// Remove most spacing between table cells.
//

table {
  border-collapse: collapse;
  border-spacing: 0;
}

この境界線の崩壊は、テーブルの丸みを帯びた境界線を破壊します。したがって、テーブル境界でそれをオーバーライドするだけで、効果をオンにできます。

.table-bordered
{
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;

    border-collapse: inherit;
}

うまくいくかもしれないと思います。

于 2013-10-18T08:06:35.927 に答える
2

次のものは私にとって非常にうまく機能します：

.table-curved {
    border-collapse: separate;
}
.table-curved {
    border: solid #ccc 1px;
    border-radius: 6px;
}
.table-curved td, .table-curved th {
    border-left: 1px solid #ccc;
    border-top: 1px solid #ccc;
}
.table-curved tr > *:first-child {
    border-left: 0px;
}
.table-curved tr:first-child > * {
    border-top: 0px;
}

もちろん、ネストされたテーブルでは機能しませんが。

于 2015-10-05T16:27:52.123 に答える
1

これは、上記のソリューションよりもはるかに簡単な別のソリューションです。これにより、最初と最後のth要素が選択され、それぞれの角に境界線が適用されます。次に、テーブル全体に半径を追加できます。

.table {
  border-radius: 5px;
}
th:first-of-type {
  border-top-left-radius: 5px;
}
th:last-of-type {
  border-top-right-radius: 5px;
}
于 2016-08-30T10:05:26.610 に答える