Question

我想在HTML中创建一个表格，其中有项目的描述，然后属性为该描述。现在，它看起来像这样：

 -----------------------------------------------------------------
| Column 1                     | Column 2     | Column 3          |
 -----------------------------------------------------------------
| Short text (checked)         | VA           | $100              |
| Longer text (checked)        | DC           | $100              |
| Very long text (checked)     | MD           | $100              |
| Text (checked)               | SC           | $100              |
 -----------------------------------------------------------------

它的理想设计看起来像这样，其中属性“（选中）”被标记出来并与其他行保持对齐：

 -----------------------------------------------------------------
| Column 1                     | Column 2     | Column 3          |
 -----------------------------------------------------------------
| Short text         (checked) | VA           | $100              |
| Longer text        (checked) | DC           | $100              |
| Very long text     (checked) | MD           | $100              |
| Text               (checked) | SC           | $100              |
 -----------------------------------------------------------------

如何使用HTML，CSS和JS完成此操作，同时还可以处理不同的描述长度？

编辑：我无法在表中添加另一列，因为预先存在的逻辑会搞砸

Answer 1

这是colspan的正确用例，它指定了单元格应跨越的列数。如果您不想在表格标记中应用其他属性或类，则只能使用column-span和td:nth-child(2)使用css解决此问题。

table {
  width:100%
}

th {
  text-align:left
}

td:nth-child(2) {
  text-align:right;
}

<table>
    <tr>
      <th colspan="2">Column 1</th>
      <th>Column 2</th>
      <th>Column 2</th>
    </tr>
    <tr>
      <td>Short text</td>
      <td>(checked)</td>
      <td>VA</td>
      <td>$100</td>
    </tr>
 </table>

左对齐两个不同的文本字段而不使用列

1 个答案: