Select text in a column of an html table

Here is a hack that doesn't involve javascript at all:

Step 1: open the inspector

For Chrome on mac, press command + option + J.

Step 2: select a random cell using the selector tool

For Chrome on mac, click the selector icon on the top left corner of the inspector to enter the selector mode.

Then click a random cell in the table.

Step 3: hide all cells by editing CSS

Click the New Style Rule button (see image below)

then enter this rule (you may want to modify it a little bit depending on your HTML)

tr td {
    display: none; # hide all cells
}

Now all cells should have disappeared.

Step 4: display only the column that you want by editing CSS

Go ahead and add another rule above that one:

tr td:nth-child(2) { # replace 2 with the index of the column you want to copy. 2 means the second column
    display: table-cell; # display that column
}

Now the column you want to copy from should have reappeared.

All the other columns should be invisible and can't be selected.

Step 5: just copy that column!

Note

• You can restore the page by refreshing.

• I find this work perfectly if you just want to select one column or two.

WIP: CSS only solution using :has() selector

The new :has() selector gave me hope in solving this issue without JS. The idea was to disable text selection for all cells, and only activate it for cells of a column that is hovered.

So you would have rule like this:

table:has(tr td:nth-child(1):hover) tr td:nth-child(1)  {
    -webkit-user-select: auto;
    user-select: auto;
}

A complete sample can be found here: https://codepen.io/catlan/pen/XWELegW

This is work in progress, because in the current version of Safari (15.6.1), the display of the text range disappears after the selection is done, only to reappear after moving the cursor for a few pixel. See https://bugs.webkit.org/show_bug.cgi?id=244445

It seems to work fine in Chrome starting with Version 105.