0

I'm trying to create a table that has a width of 100% of the parent container, and the td's each are sized automatically on screen size, which is all working fine. Only the max-width property is ignored on the td. It is scaling to more than 150px. The min-width is working fine.

What am I doing wrong?

I have the following css:

table {
    table-layout: fixed;
    width: 100%;
}
td {
     min-width: 60px;
     max-width: 150px;
     height: 40px;
}

Edit: Working example: https://jsfiddle.net/7ez2hmy6/1/

Rick
  • 109
  • 13
  • 1
    `scaling to more than 100px` - because your max width **is** more than 100px (actually 150px)? – Justinas Aug 27 '21 at 12:23
  • Provide a proper [mre] of your issue, please, not just CSS. – CBroe Aug 27 '21 at 12:24
  • Sorry my bad, I ment 150px in my question.. edited it. I will update my question with a working example as well – Rick Aug 27 '21 at 12:33
  • Did you google before asking? googling "td max width" sent me right there: https://stackoverflow.com/a/8465980/1762556 – Mouradif Aug 27 '21 at 12:51

1 Answers1

0

We need an example to answer the right way :)

My guess : if the cell content is larger than 100px (whith a white-space: nowrap, for example), the navigator will still keep the width of the content.

Perhaps adding a overflow-x: scroll would resolve, but it would add a scrollbar when the length will be greater

https://developer.mozilla.org/fr/docs/Web/CSS/overflow-x

EDIT

With your example, I see one drawback: you ask the table to take 100% of width, but you have cells that should only take some width in it. So, the navigator has to take a choice between: must I take 100%, or just the sum of cells max-width?

The best I can do is to fix the width of the cells, and let a last one take the remaining space. Like this: https://jsfiddle.net/1rz8bksp/

  • each cell would take between 75 and 150px, as asked,
  • the remaining one will take... the remaining space. Not very satisfying, but I don't see how to do elsewhere...
Worst
  • 169
  • 8
  • A scrollbar is fine, but that doesn't solve my problem sadly. I've added a working example in my original question – Rick Aug 27 '21 at 12:44