Question

我在bootstrap中制作一张桌子，我正在试图找出如何删除每行顶部显示的边框。

我正在重新创建Stack Overflow主页并进行练习，我正在制作热门问题表。我为每个实际行使用2个引导行。由于我使用2行显示为1，我需要隐藏第2行的顶部边框。

我尝试了两种不同的CSS方法试图摆脱它无济于事。两者都与html一起显示在下面：

<style>

.2nd-line {
    border-top: none;
}

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

</style>


<div class = "row-fluid"> <!-- begin row 1 -->
  <div class = "col-md-9">
    <div class = "panel-body">
      <table class="table borderless">
        <tr class="warning">
          <td>
            <div class = "col-md-1">
              <p class = "top-questions-stats">0</p>
            </div>
            <div class = "col-md-1">
              <p class = "top-questions-stats">1</p>
            </div>
            <div class = "col-md-1">
              <p class = "top-questions-stats">13</p>
            </div>
            <div class = "col-md-6">
              <a href = "http://stackoverflow.com/questions/33545349/clipping-the-required-portion-of-the-image-using-css" target = "blank"><h5>Clipping the required portion of the image using CSS</h5></a>
            </div>
          </td>
        </tr>
        <tr class="warning 2nd-line borderless">
          <td class = "2nd-line borderless">
            <div class = "col-md-1">
              <p class = "top-questions-stats">votes</p>
            </div>
            <div class = "col-md-1">
              <p class = "top-questions-stats">answer</p>
            </div>
            <div class = "col-md-1">
              <p class = "top-questions-stats">views</p>
            </div>
            <div class = "col-md-2">
              <p>tags</p>
            </div>
            <div class = "col-md-4">
              <p class = "asked">asked 29 secs ago Darryl Mendonez</p>
            </div>
          </td>
        </tr> <!-- end row 1 -->

Answer 1

.borderless > thead > tr > th,
.borderless > tbody > tr > th,
.borderless > tfoot > tr > th,
.borderless > thead > tr > td,
.borderless > tbody > tr > td,
.borderless > tfoot > tr > td {
  border-top: none;
}

这是如何在没有！important标签的情况下完成的。

Answer 2

将！important属性添加到第二种样式。

.borderless td, .borderless th {
    border: none !important;
}

试图删除bootstrap 3表中的水平线

2 个答案: