Question

我有一个非常简单的使用bootstrap创建的表，并希望在特定行中添加border-top，但由于某种原因，它没有显示出来。这就是我所拥有的：

<div class="container">
    <table class="table table-striped table-hover table-bordered">
        <thead>
            <tr>
                <th>int</th>
                <th>rand</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>aaa</td>
            </tr>
            <tr>
                <td>41</td>
                <td>xzcx</td>
            </tr>
            <tr style="border-top: 1px solid red;">
                <td>12</td>
                <td>scaaa</td>
            </tr>
            <tr>
                <td>15</td>
                <td>ghghf</td>
            </tr>
        </tbody>
    </table>
</div>

JSfiddle

Answer 1

一种解决方案是在border-top中应用td而不是tr：

<tr>
      <td style="border-top: 1px solid red;">12</td>
      <td style="border-top: 1px solid red;">scaaa</td>
</tr>

fiddle

看看这里：

Border conflict resolution

Answer 2

将border-collapse: collapse;添加到表中会修复此问题...

Answer 3

实际上，你所拥有的是正确的，这是非常难以看到的。尝试碰撞px尺寸，这将更加明显。风格将放在两个孩子身上;这是最佳解决方案，除非您希望单个单元格上的边框。

<div class="container">
<table class="table table-striped table-hover table-bordered">
    <thead>
        <tr>
            <th >int</th>
            <th>rand</th>
        </tr>
    </thead>
    <tbody>
        <tr style="border-top: 10px solid red;">
            <td>1</td>
            <td>aaa</td>
        </tr>
        <tr>
            <td>41</td>
            <td>xzcx</td>
        </tr>
        <tr >
            <td >12</td>
            <td>scaaa</td>
        </tr>
        <tr>
            <td>15</td>
            <td>ghghf</td>
        </tr>
    </tbody>
</table>

border top

bootply

Answer 4

您必须将样式设置为td元素。但是，如果您不想设置内联样式的两倍，则只能通过css设置它：http://jsfiddle.net/eh1e20fs/6/

.container table tbody tr:nth-child(3) td {
    border-top: 1px solid red;
}

/* WHERE nth-child(n) refers to the number of the table row... */

将border-top添加到特定行

4 个答案: