HTML 表格规则直到边框大小

Question

我有以下 html 代码，

div {
  border: 2px solid red;
  height: 50vh;
  width: 50vw;
}

table {
  border: 1px solid;
  table-layout: fixed;
}

<div>
  <table rules="cols">
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>Address</th>
      <th>Phone No</th>
    </tr>


    <tr>
      <td>Antony</td>
      <td>20</td>
      <td>USA</td>
      <td>12345</td>
    </tr>
    <tr>
      <td>Das</td>
      <td>20</td>
      <td>UK</td>
      <td>12345</td>
    </tr>

    <tr>
      <td>Michel</td>
      <td>20</td>
      <td>USA</td>
      <td>12345</td>
    </tr>

  </table>
</div>

代码的结果是，

我期望得到的结果是，

我需要规则直到边界结束。

当我尝试调整表格的高度时，它会随着内容一起调整大小，

我只想调整列规则的大小，任何建议将不胜感激

Answer 1

我相信这就是你的答案

  table {
     border-right: 1px solid;
     table-layout: fixed;
    }