表格 tr 边框宽度 100%答案

【问题标题】：Table tr border width 100%表格 tr 边框宽度 100%
【发布时间】：2019-01-27 15:52:34
【问题描述】：

我想让我的边框顶部全表宽度，但它只占用我的表数据 (td) 大小...

最后一个 tr 有我的边框顶部，但它没有占据整个表格的大小。

        th {
      border: 0 solid #581D74;
      border-bottom-width: 1px;
      padding: 15px;
    }

    tr, td, th {
      text-align: left;
      padding: 15px;
    }


    .add-btn {
      min-width: 0;
      color: white;
    }

    .add-icon {
      color: #581d74;
    }

    .total-row {
      border: 0 solid #581d74;
      border-top-width: 1px;
      padding: 15px;
      border-collapse: collapse;
    }

<table class="disinves-table">
        <tr class="table-header">
          <th></th>
          <th>head 1</th>
          <th>head 2</th>
          <th>head3</th>
        </tr>

        <tr>
          <td><button mat-button class="add-btn"><mat-icon class="add-icon">add_circle</mat-icon></button></td>
          <td>first data</td>
          <td>19%</td>
        </tr>

        <tr class="total-row">
          <td>Total</td>
          <td></td>
          <td>8654</td>
        </tr>
      </table>

【问题讨论】：

从您的问题中不清楚您在问什么根据我对您问题的理解：您希望表格标题有一个填充表格宽度但仅填充表格行的边框（tr ) 这样做是因为在你的 css 中没有一个名为 disinves-table 的类，它具有 width 属性，因此它将表格的宽度包裹在整个集体表格单元格宽度周围
.disinves-table { 宽度：100%;边框折叠：折叠；我实际上得到了它^^“抱歉。所以在我最后一个带有总行类的 tr 中，我希望它有一个全宽（表格宽度）边框顶部。现在它只是占据我的 td 的边框。跨度>
为了能够设置tr 的样式，table 需要有table{ border-collapse: collapse; } 。此外，您需要拥有与th 相同数量的td，或者在td 之一上使用colspan，否则tr 不会填满整个表格宽度

标签： html css html-table border

【解决方案1】：

如果您抱怨在边框中看到的间隙，那是因为表格的默认样式是在单元格之间留有几个像素的空间。
解决方法：将表的border-spacing设置为0。

.disinves-table {
  border-spacing: 0;
}

th {
  border: 0 solid #581D74;
  border-bottom-width: 1px;
  padding: 15px;
}

tr, td, th {
  text-align: left;
  padding: 15px;
}

.add-btn {
  min-width: 0;
  color: white;
}

.add-icon {
  color: #581d74;
}

.total-row {
  border: 0 solid #581d74;
  border-top-width: 1px;
  padding: 15px;
  border-collapse: collapse;
}

<table class="disinves-table">
  <tr class="table-header">
    <th></th>
    <th>head 1</th>
    <th>head 2</th>
    <th>head3</th>
  </tr>

  <tr>
    <td><button mat-button class="add-btn"><mat-icon class="add-icon">add_circle</mat-icon></button></td>
    <td>first data</td>
    <td>19%</td>
  </tr>

  <tr class="total-row">
    <td>Total</td>
    <td></td>
    <td>8654</td>
  </tr>
</table>

【讨论】：

晚上好，先生 :) ...我确定他们正在寻找这个：“为了能够设置 tr 的样式，table 需要有 table{ border-collapse: collapse; } 。此外，您需要要么拥有与 th 相同数量的 td，要么在 td 之一上使用 colspan，否则 tr 不会填满整个表格宽度”
@LGSon 您可以自己将其发布为答案。在您的解释之后，这完全有可能是 OP 的意思而不是差距。哦，好吧。
早安伙计们 =)。所以实际上是的，我只是在我的表中添加了一些 td，它工作正常^^。但是，是的，我认为 colspan 的建议会很好用 =)。谢谢你的回答，我不知道如何把你评论到答案中^^'所以如果你能把它=）。