Twitter Bootstrap 3 中的圆桌会议 [英] Rounded tables in Twitter Bootstrap 3

问题描述

Bootstrap 3 在桌子上掉了圆角.当我应用 .table-bordered 类时，我应该应用哪些样式来恢复它们?

更新

到目前为止，我已经找到了这段代码，但没有任何效果.

取自 Bootstrap 2.3.2 的 CSS:

.table-bordered{-webkit-border-radius: 4px;-moz-border-radius: 4px;边框半径: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:第一个孩子{-webkit-border-top-left-radius: 4px;边框左上角半径: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:第一个孩子{-webkit-border-bottom-left-radius: 4px;边框左下角半径:4px；-moz-border-radius-bottomleft: 4px;}

HTML 代码:

<头><tr><th style="width: 50%" >配置.名称</th><th>API 调用</th><th>当前金额</th><th>行动</th></tr></thead><tr><td><a href="/searchsources/details">议程</a></td><td>2,876</td><td>80.67 美元</td><td><a href="/searchsources/details">编辑</a></td></tr></tbody>

解决方案

如果你用面板围绕桌子，你的圆角就会变成圆角.

像这样:

<table class="table table-bordered">....

Bootstrap 3 has dropped rounded corners on tables. Which styles should I apply to get them back when I apply the .table-bordered class, please?

UPDATE

So far I've come to this code, with no effect.

CSS taken from Bootstrap 2.3.2:

.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 code:

<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>

解决方案

If you surround the table with a panel you get your rounded corners.

Like this:

<div class="panel panel-default">
    <table class="table table-bordered">
        ....
    </table>
</div>

这篇关于Twitter Bootstrap 3 中的圆桌会议的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！