0

I want to create a responsive HTML table that increases and decreases according to certain values that I want. The table consists of a table header and the body of the table, where I will apply more data from VUE3 (but this is not so important).

I have designed a sketch to give you an idea of what I want. Values are symbolic. I can't apply min-width / max-width for the cells in the table.

enter image description here

kevx
  • 79
  • 9
  • 1
    If you will use HTML than you should know, that min-width and max-width properties do not work the way you expect for
    : https://www.w3.org/TR/CSS21/visudet.html#min-max-widths More simple way - use
    but It is semantically incorrect to simulate data tables with
    's
    – Kirill May 10 '23 at 06:47
  • 1
    What exactly do you want us to tell you? Where exactly is your problem? Is it that you can't apply min/max values to your cells? That's because this just isn't possible in CSS. More about [here](https://stackoverflow.com/questions/6426779/min-width-and-max-height-for-table-attributes) – Hytrax May 10 '23 at 06:51
  • I want to make the table fluid. At lower resolution some of the columns to have 30px width and the same columns at higher resolution to have a maximum of 80px. And for the content inside of cells to have overflow-x-auto in case that the content will be bigger. – kevx May 10 '23 at 06:59
  • What's the relevant HTML to reproduce the table you've shown a picture of? – David Thomas May 10 '23 at 08:30

0 Answers0