微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

css3 – Rounded表在Twitter Bootstrap 3

Bootstrap 3在桌子上放了圆角。当我应用.table-bordered类时,我应该应用哪些样式来让他们回来?

更新

到目前为止,我来到这个代码,没有效果

从Bootstrap获取的CSS 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代码

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

解决方法

如果你用一个面板围绕桌子,你会得到你的圆角。

喜欢这个:

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

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。