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

问题描述

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

第一	第二个
这是第一条消息	这是第二条消息
这是第二行的第一条消息	这是第二行的第二条消息

（用户一次只选择斜体的东西，另一个一样）

所以当我选择“第一条”并以“这是第二行中的第一条消息”结束选择时，它应该只选择“这是第一条消息 em>”而不是“Second”和“这是第二条消息”。

---

我尝试过 user-select: none;，但这只适用于我只希望用户能够选择一列的情况。

解决方法

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

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>