1659515 - CSS table column (col, th or td) resize (horizontal) doesn't work. Should (also) respect min & max width values

Status: RESOLVED FIXED

(Core :: Layout: Tables, defect)

Description

[Maurice Hellebrekers]

User Agent: Mozilla/5.0 (Windows NT 6.3; Win64; x64; rv:79.0) Gecko/20100101 Firefox/79.0

Steps to reproduce:

Set CSS resize: horizontal via a class for (respectively) a (1) col, (2) hd and(3) td of an HTML table, combined with overflow: auto. Also tried (4) putting a DIV within the TH cells.

Actual results:

1,2 & 3 above do not work at all. 4 (DIV workaround) resizes the content and with it the table column, but then does not respect the min & max width settings on the column. The problem occurs across all desktop and mobile devices.

Expected results:

Every HTML table header cell with this css setting should have an interface element for the user to be able to resize the column within/between the min and max width settings for every specific column (set via css/styling for the table col elements or the table cell/td elements).

Comment 1

[Maurice Hellebrekers]

(2) hd - should be: (2) th

Comment 2

[BugBot [:suhaib / :marco/ :calixte]]

Bugbug thinks this bug should belong to this component, but please revert this change in case of error.

Comment 3

[Emilio Cobos Álvarez (:emilio)]

Can you attach an HTML file that reproduces the issue? Thank you.

Comment 4

[Ksenia Berezina [:ksenia]]

Attachment: 111490.html

I came across this issue in https://github.com/webcompat/web-bugs/issues/111490 where it's possible to resize table header columns in Chrome, but not in Firefox in Google BigQuery console. Chrome has handlers on the <th> elements (as long as overflow value is set to auto\hidden\scroll) that allow to resize the columns.

In this testcase, text in one of the columns is very long and it's impossible to read it without resizing the header.

Comment 5

[Ksenia Berezina [:ksenia]]

Attachment: 111490-min.html

It's possible to resize <td> elements in Chrome as well (this is an example with max-width set on both the table cell and table cell header).

Comment 6

[Daniel Holbert [:dholbert]]

This might just be a version of bug 221154, "table cells do not support 'overflow' correctly".

(The testcase uses overflow:hidden on a th which is a special type of table cell.)

Comment 7

[Sean Rose [:srose]]

(In reply to Daniel Holbert [:dholbert] from comment #6)

This might just be a version of bug 221154, "table cells do not support 'overflow' correctly".

(The testcase uses overflow:hidden on a th which is a special type of table cell.)

I don't think so. This bug is about being able to dynamically resize table columns by clicking and dragging when col, th, or td elements have resize: horizontal CSS specified.

Comment 8

[Emilio Cobos Álvarez (:emilio)]

What Daniel wanted to say is that resize is conditional on the element being a scroll container. Table cells are not scroll containers because of bug 221154, thus fixing bug 221154 will also fix this.

Comment 9

[Daniel Holbert [:dholbert]]

Indeed -- thanks for the clarification, emilio.

Comment 10

[Gérard Talbot]

Back in 2004 and on, with Firefox, I was able to drag the first table column border and resize the table column in this DHTML demo:

http://www.gtalbot.org/DHTMLSection/ColumnResize.html

I do not use 'resize: horizontal' though.

Comment 12

[Dennis Schubert [:denschub]]

This has been fixed in the current Nightly, as a fix for bug 221154 is now in tree. :)