CODEWITHSUNDEEP
htmlcss
Lucas Berger
Lucas Berger

Reputation: 19

Hidden Overflow in Tablecells with 100% width

I am trying to achieve a hidden overflow in a table column with "width: 100%".

In a normal div or a cell with a absolute width I would do it like this:

white-space: nowrap; 
overflow: hidden;

but this just stretches the cell to fit the content, even if I give the table a max-width.

Here's an example to illustrate my problem: https://codesandbox.io/s/infallible-gates-7fxrg

feel free to ask some questions if something isn't clear.

Thank you for your solutions in advance.

Upvotes: 0

Views: 35

Answers (1)

Wais Kamal
Wais Kamal

Reputation: 6210

Overflow only works on elements that are not stretchable. Otherwise there is no real "overflow" because the element can adapt itself to the width of its contents. In your case, you have to first assign the cell a fixed width, then use:

overflow: hidden;
white-space: nowrap;

Upvotes: 1

Related Questions