Question

我想使边框顶部的整个表格宽度变大，但它仅占用表格数据（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>

Answer 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边框宽度100％

1 个答案: