11

我有

<table class="table table-condensed">

我曾经table-bordered在那里，但它给了我行之间的线条。我只想要整个表格外部的顶部、底部、左侧和右侧线，并且行之间没有线。

另外，我尝试先做一些小步骤，因此尝试按照此处的建议删除行之间的行 Remove row lines in twitter bootstrap and the solution given

table td {
    border-top: none;
}

对我不起作用

4

4 回答 4

12

我相信您的 CSS 没有被采纳，因为它不够具体。在 twitter 引导代码中定义边框的 css 是：

.table th, .table td { /*css*/ }

但你的代码是

table td { /* css */}

第一个被认为更具体，因为它使用类“.table”而不是 table 元素作为选择器，因此具有更高的优先级。

做了一个小 jsfiddle 来做你想做的事http://jsfiddle.net/hajpoj/EfUAa/11/

.table td, .table th {
    border: none;
}

table.table.table-condensed {
    border: 1px solid black;
}

这是关于 css 特异性的一个很好的资源：

http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

还要确保在引导文件之后加载您的 css 文件。

于 2012-09-13T23:23:14.950 回答
2

您可以将以下内容添加到您的 CSS 样式中：

<style>
.table{
outline-style: solid;
outline-width: 2px;
</style>

希望能帮助到你。有关“大纲样式”的更多信息：https ://www.w3schools.com/cssref/pr_outline-style.asp 。

于 2018-10-26T19:16:14.083 回答
0

将 Bootstrap 类“border”添加到 table 标签并将类“border-0”添加到 th,td 标签

于 2021-02-18T15:42:00.893 回答
0

对于最近看到这个的其他人，您可以简单地将border类添加到您的表中，这应该给它外边框。

带外边框的表格

<table class="table">
    <thead class="table border">
        <tr>
            <th>Firstname</th>
            <th>Lastname</th>
            <th>Email</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>John</td>
            <td>Doe</td>
            <td>john@example.com</td>
        </tr>
        <tr>
            <td>Mary</td>
            <td>Moe</td>
            <td>mary@example.com</td>
        </tr>
    <tbody>
</table>

没有边框的表格

table-borderless将产生一个没有任何边界的表格，外部或内部

<table class="table">
    <thead class="table table-borderless">
        <tr>
            <th>Firstname</th>
            <th>Lastname</th>
            <th>Email</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>John</td>
            <td>Doe</td>
            <td>john@example.com</td>
        </tr>
        <tr>
            <td>Mary</td>
            <td>Moe</td>
            <td>mary@example.com</td>
        </tr>
    <tbody>
</table>

表有外边框，没有内边框

要生成仅具有外边框而没有内边框的表格，只需将table-borderless和border类添加到表格中，如下所示：

<table class="table">
    <thead class="table border table-borderless">
        <tr>
            <th>Firstname</th>
            <th>Lastname</th>
            <th>Email</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>John</td>
            <td>Doe</td>
            <td>john@example.com</td>
        </tr>
        <tr>
            <td>Mary</td>
            <td>Moe</td>
            <td>mary@example.com</td>
        </tr>
    <tbody>
</table>

希望这可以帮助任何人，而不必使用 CSS 等。

于 2021-11-22T10:09:45.770 回答