Hello!

There is an element table, in the lines of which there may be a certain number of cells. There may be 3 cells, maybe 5 or 10, but the same number is required in different lines. Well, that is, we represent a normal, human table, as in Excel.

How can I do it through css so that:

  1. The plate had some fixed width, say 700px;
  2. Each column had some fixed width, say 300px;
  3. If the total width of the cells is greater than the width of the table, then a horizontal scroll should appear. Actually, this does not work out for me at all: as long as the width of the columns is evenly reduced if it exceeds the width of the table, setting the overflow property does not help

An illustration of what I want: http://jsfiddle.net/yt6169s1/

<div class="table-wrapper"> <table class="mytable"> <tr> <th class="mytd">1</th> <th class="mytd">2</th> <th class="mytd">3</th> <th class="mytd">4</th> <th class="mytd">5</th> <th class="mytd">6</th> <th class="mytd">7</th> </tr> <tr> <td class="mytd">1</td> <td class="mytd">2</td> <td class="mytd">3</td> <td class="mytd">4</td> <td class="mytd">5</td> <td class="mytd">6</td> <td class="mytd">7</td> </tr> </table> </div> .table-wrapper { width: 700px; } .mytable { border-collapse: collapse; overflow: auto; } .mytd { width: 300px; border: 1px solid black; }

Accordingly, I want the example to follow the link to see only the 1st, 2nd columns 300px wide and the 3rd part 100px wide, while the rest scrolled.

I can do this only through css, without using javascript and without changing the table on the structure of the divs? Compatibility with any old stuff is optional.

Let me try to reformulate it even better: I need some area of ​​limited width (say 700 px) into which several columns of fixed width will fit (i.e., the width of the columns exactly as I indicated, said 200px for each column - and there will be honest 200px for each column ). And if there are more columns than necessary (say 5), then a horizontal scroll will appear.

In other words, I need something like here: http://jsfiddle.net/qr6e61bw/ only with a table and not with divs

  • Width of the table set in 2100px? - Visman
  • @Visman, not. Now I will try to reformulate: I need a certain area of ​​limited width in which several columns of fixed width will fit (i.e., the width of the columns is exactly as I indicated). And if there are more columns than necessary, then a horizontal scroll will appear. - Desperation

1 answer 1

In the table you write table-layout: fixed . In this mode, the table width is not recalculated when changing or inscribing into the parent region, and the existing overflow: auto will give a scrollbar from the bottom. Details here .

 .mytable { border-collapse: collapse; overflow: auto; table-layout: fixed; }

Adpate: The reason turned out to be different - the width attribute in the column sets the maximum width of the column, with the minimum width limited by the elements inside the column. In this case, the columns are one character at a time, and the minimum width is insufficient for the appearance of a scroll. It is treated by prescribing min-width in the style of mytd :

 .mytd { min-width: 300px; border: 1px solid black; }

To specify the exact width of the column, it is desirable to use max-width or width together with min-width .

  • Although the link can find the answer to the question, it is better to point out the most important thing here, and give the link as a source. If the page to which the link leads will be changed, the response link may become invalid. - Abyx
  • @Abyx Persuaded. - Vesper
  • @Vesper I already tried it and it does not work as I want, slightly updated the question, maybe it became clearer - Despair
  • @ Despair Updated the answer, check. - Vesper
  • @Vesper, yeah, thanks, you really helped, plus a reputation as it will appear) Maybe you should add to the answer that overflow: auto should not be installed on the table itself, as in my example, but on the diva that wraps it, and table-layout: fixed not needed: jsfiddle.net/73osmpet - Despair