Question

我正在使用Twitter Bootstrap为我的网站提供一致的外观，当我向表thead tr添加背景时，我遇到了问题。这是来自Bootstrap的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

当你设置背景图像时，你会松开圆角，你必须重新定义边框半径：

示例：

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

Answer 2

在Bootstrap 3.0中，您需要将表格放入面板中。

HTML：

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

CSS：

.backgrounded thead {
   background: #499bea;    
}

添加背景覆盖圆角[CSS / Twitter的Bootstrap]

2 个答案: