Twitter-bootstrap表如何只获取外边框线而不是行之间

Question

我有

<table class="table table-condensed">

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

此外,我尝试先做婴儿步骤,因此尝试删除行之间的行,如此处所示 删除twitter bootstrap中的行行 并给出解决方案

table td {
    border-top: none;
}

不适合我

Answer 1

我相信你的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文件.

Answer 2

对于最近看到此内容的其他人，您可以简单地将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 等。