CSS在表格中垂直选择用户文本

Question

我想创建一个表，但我希望用户能够先选择列，然后选择第二列，依此类推（而不是先选择行的方式）。

First	Second
This is the first message	This is the second message
This is the first message in the second row	This is the second message in the second row

（只有斜体的东西应该由用户一次选择，其他的也一样）

因此，当我选择“第一个”并以“这是第二行中的第一条消息”结束选择时，它应该只选择“这是第一条消息 em>”而不是“Second”和“This is the second message”。

---

我尝试过user-select: none;，但这仅在我只希望用户能够选择一列时才有效。

Answer 1

您可以通过嵌套表格来实现：

table{
  text-align:left;
}

<table>
  <tr>
    <td>
      <table>
        <tr>
          <th>First</th>
        </tr>
        <tr>
          <td>This is the first message</td>
        </tr>
        <tr>
          <td>This is the first message in the second row</td>
        </tr>
      </table>
    </td>

    <td>
      <table>
        <tr>
          <th>Second</th>
        </tr>
        <tr>
          <td>This is the second message</td>
        </tr>
        <tr>
          <td>This is the second message in the second row</td>
        </tr>
      </table>
    </td>
  </tr>
</table>