Question

试图找到底部:-)，想在bootstrap 3表中显示一个底部边框（每行）......

<table id="modalTable1" class="table table-condensed">
  <tbody>
    <tr>
      <td class="success col-sm-3">ping</td>
      <td class="success col-sm-9">Ping test to host</td>
    </tr>
    <tr>
      <td class="success col-sm-3">http</td>
      <td class="success col-sm-9">http test</td>
    </tr>
    <tr>
      <td class="success col-sm-3">ftp</td>
      <td class="success col-sm-9">ftpo test</td>
    </tr>
   </tbody>
</table>

这是我的基本表，但我需要在bootstrap模式中显示它;我不认为模态会导致这个问题，但我提供了带有和没有模态的表的小提琴。

到目前为止我尝试了什么：

我尝试了以下css，但都没有任何影响：

tr.border_bottom td {
    border-bottom:1pt solid black;
}

td.border_bottom td {
    border-bottom:1pt solid black;
}

......也是这样：

.table th, .table td {
    border-bottom:1pt solid black;
}

JSFiddle with CSS Styling

作为最后的手段，我在每个style="border: 1px solid black上使用<td>尝试了内联样式。那种方式有效，但奇怪的是它在桌子上显示了左边和上边框，而不是细胞。

JSFiddle with inline styling

这里只是表格的小提琴（没有模态对话框） JSFiddle with just table

不确定这是一个bootstrap .table还是css问题，但我太新了，无法引导以排除前者

Answer 1

首先，您可以使用基本引导样式指定它。

Bordered table

为表格和单元格的所有边添加.table-bordered。

似乎还有另一个错误，我注意到班级成功正在干扰背景颜色..删除边框。

女巫是由该声明的相对位置引起的：

.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
    min-height: 1px;
    padding-left: 15px;
    padding-right: 15px;
    position: relative; /* <-- there's your money border deseapearrring ! */
}

<强>修复

添加位置：静态到你的td.success似乎可以解决你的问题。

td.success{position:static}

http://jsfiddle.net/tCgYC/13/或http://jsfiddle.net/tCgYC/14/

在看到http://getbootstrap.com/css/#tables-contextual-classes后，我从模态面板中添加了位置：relative后，我把它弄成了。

[编辑后]

似乎与此问题有关：https://github.com/twbs/bootstrap/issues/11623

Answer 2

我建议您在重写BootStrap CSS时使用！important。在这种情况下，请更改：

tr.border_bottom td {
    border-bottom:1pt solid black;
}

td.border_bottom td {
    border-bottom:1pt solid black;
}

为：

tr, td.border_bottom td {
    border-bottom:1pt solid black !important;
}

bootstrap表没有正确显示行边框

2 个答案: