Question

我有一个HTML代码

          <table class="table table-condensed order-statistics">
        <tr class="order-statistics-row">
          <div class="row">
            <div class="col-lg-4">
              Order ID:
            </div>
            <div class="col-lg-8">
              <strong>{{ $order->so_id }}</strong>
            </div>
          </div>
        </tr>
        <tr class="order-statistics-row">
          <div class="row">
            <div class="col-lg-4">
              Invoice ID:
            </div>
            <div class="col-lg-8">
              <strong>{{ $order->invoice_id }}</strong>
            </div>
          </div>
        </tr>
...Similarly a bit of other rows.
</table>

我想添加一些底部边框来分隔每一行。我试过这个。

.order-statistics-row
{
    border-bottom: 1pt solid black;
}

现在这不工作意味着边界线不会被绘制。任何人都可以帮助我或建议更好的主意吗？

Answer 1

您可以通过div和行而不是tr元素来设置样式。

例如，将您的order-statistics-row课程移至行div。

参见jsfiddle：

https://jsfiddle.net/u5w971cr/2/

Answer 2

如果您希望每行下方都有边框，则需要更改您的课程。

而不是使用课程.order-statistics-row，而是使用.row代替。

.row
{
    border-bottom: 1px solid black;
}

我在这里使用px只是为了您可以将其更改回pt的示例。

Jsfiddle - https://jsfiddle.net/sj5vjsLq/

Answer 3

你知道你可以简单地添加一个新的div并给它一个或那个......

看到这个......

＆＃13;

.order-statistics-row {
  border-bottom: 1pt solid black;
}

＆＃13;

<tr>
  <div class="order-statistics-row">
    <div class="row">
      <div class="col-lg-4">
        Invoice ID:
      </div>
      <div class="col-lg-8">
        <strong>{{ $order->invoice_id }}</strong>
      </div>
    </div>
  </div>
</tr>

＆＃13;

Answer 4

您的代码中缺少表格单元<td></td>。你的表行中应该有单元格，这些单元格应该有边框，而不是行。

你可能没有它们，但根据HTML规范，它不是有效的HTML。 @sideshowbarker在this stackoverflow post上写了一篇很好的文章。

此外，如果这是真正的表格数据，您可以完成布局而不将div放在表格中，这本身就是一种不好的做法。使用CSS处理列的宽度，并且表中不需要引导网格。

此外，您还会注意到桌面上的border-collapse属性。这将折叠表格元素单元格的默认边框，以便该行在单元格之间没有间隙。

＆＃13;

table {
  border-collapse: collapse;
}
tr.order-statistics-row td {
 border-bottom: 1px solid black;
}

＆＃13;

<table class="table table-condensed order-statistics">
    <tr class="order-statistics-row">
      <td>Order ID:</td>
      <td><strong>{{ $order->so_id }}</strong></td>
    </tr>
    <tr class="order-statistics-row">
       <td>Invoice ID:</td>
       <td><strong>{{ $order->invoice_id }}</strong></td>
    </tr>
</table>

＆＃13;

Answer 5

应用＆＃34; order-statistics-row＆＃34;上课到div。看看这个：https://jsfiddle.net/fv5n46Lc/1/

希望这有帮助！

      <div class="row order-statistics-row">
        <div class="col-lg-4">
          Order ID:
        </div>
        <div class="col-lg-8">
          <strong>{{ $order->so_id }}</strong>
        </div>
      </div>

      <div class="row order-statistics-row">
        <div class="col-lg-4">
          Invoice ID:
        </div>
        <div class="col-lg-8">
          <strong>{{ $order->invoice_id }}</strong>
        </div>
      </div>

添加边框线以分隔css中的行

5 个答案: