CSS Make user text selection vertically in table

Question

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.

@NathanielFlick The user should do that and the selection is on a row-basis. I want that as I want the user to be able to copy the collums and paste it directly as if the lines between the rows do not exist. — QuickWrite, Jun 20 '21 at 20:19
Have you thought about adding more advanced features to your tables using Datatables JS? https://www.datatables.net/ — Nathaniel Flick, Jun 20 '21 at 20:57
@Nathaniel Flick No, as I do not need all of these features. — QuickWrite, Jun 20 '21 at 21:04
You don't have to use all the features but I'll bet it has what you need — Nathaniel Flick, Jun 20 '21 at 21:25

score 0 · Accepted Answer · answered Jun 20 '21 at 19:42

0

You can achieve this by nesting tables:

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>

answered Jun 20 '21 at 19:42

Spectric

30,714
6
20
43

Yes (and thanks), but unfortunately this does not work exactly like a table would. (And I need this behaviour of the same height of the cells that are next to another). – QuickWrite Jun 20 '21 at 19:53
@QuickWrite What do you mean by "this does not work exactly like a table would"? – Spectric Jun 20 '21 at 20:10
When I create a `` Element and I am inserting content into this element it calculates the height. And this height is transferred to all of the other elements in the ``-tag. But this is unfortunately not here as if I do `This is the first
message` the td does not have the same height as the td with the content of `This is the second message` (And I am sorry that my question was not clear) – QuickWrite Jun 20 '21 at 20:15
I've marked this question as "accepted" as this was the best (and unfortunately) only answer that tried something that maybe could help others. – QuickWrite Feb 02 '23 at 05:48

CSS Make user text selection vertically in table

1 Answers1