html - 尝试实现标签垂直对齐的设计

Question

中间的线没有，只是为了制造一个 fork 。添加长文本不应将列标签向左移动，位置应固定

.wid {
  width: 100%;
}

table,
th,
td {
  border: 1px solid black;
  border-collapse: collapse;
}

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

table {
  table-layout:fixed;
}

<table class="wid">
  <tr>
    <th>Name:</th>
    <td>Bill asfsafsafasfasfasfasdfasGates</td>

    <th>Name:</th>
    <td>Bill Gates</td>
  </tr>
  <tr>
    <th>Name:</th>
    <td>Bill Gates</td>
    <th>Naasdfasdfme:</th>
    <td>Bill Gates</td>
  </tr>
</table>

添加表格布局:固定；这样做

Answer 1

使用自动换行属性将文本分隔到下一行。

.wid {
  width: 100%;
}

table,
th,
td {
  border: 1px solid black;
  border-collapse: collapse;
}

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

table {
  table-layout:fixed;
}

td, th{
   word-wrap: break-word; /*Breaks the word to the next line when cell space runs out*/

 }

th{
width:10%; /*Change the percent value to adjust the table label width*/
 
}

<table class="wid">
  <tr>
    <th>Name:</th>
    <td>Bill asfsafsafasfasfasfasdfasGates</td>

    <th>Name:</th>
    <td>Bill Gates</td>
  </tr>
  <tr>
    <th>Name:</th>
    <td>Bill Gates</td>
    <th>Naasdfasdfme:</th>
    <td>Bill Gateffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff</td>
  </tr>
</table>

编辑:为响应评论设置 width:10%。