[SOLVED] CSS Make user text selection vertically in table

CSS Make user text selection vertically in table

I want to create a table, but I want the user to be able to select the columns first and then the second column and so on (instead of the way of selecting the rows first).

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

(Only the things that are italic should be selected by the user at once and the same for the other one)

And so that when I select "First" and end the selection with "This is the first message in the second row" it should only select "This is the first message" with it and not "Second" and "This is the second message" with it.

I've tried user-select: none;, but this only works if I only want the user to be able to select one column.

Solution

You can mimic the behavior of a table, but place the cells sequentially. For example, using subgrid:

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.table {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(3, auto);
  padding: 1px 0 0 1px;
  .tr {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 3;
  }
  .td {
    padding: 4px 8px;
    border: solid 1px #ccc;
    margin: -1px 0 0 -1px;
    display: flex;
    align-items: center;
  }
}

<div class="table">
  <div class="tr">
    <div class="td"><b><i>First</i></b></div>
    <div class="td"><i>This is the first message</i></div>
    <div class="td"><i>This is the first message in the second row</i></div>
  </div>
  <div class="tr">
    <div class="td"><b>Second</b></div>
    <div class="td">This is the<br> second message</div>
    <div class="td">This is the second message in the second row</div>
  </div>
</div>