Table with fixed-width columns - without specifying table width

Question

I'm looking for a way to create table with fixed-width cells. When window is too narrow, horizontal scroll bar should appear.

In my example, there are two 400px columns, therefore table should be 800px wide. When screen width is less than 800px, then horizontal scrollbar will appear. That's exact behavior, which I'm looking for: http://jsbin.com/xeniwovole/edit?html,css,output

And now to question: can it be done without specifying table width? In real life, table will have dynamic amount on columns and column widths are responsive. Therefore, it's not reasonable to try to calculate table width as sum of column widths.

specify width in percentages I guess... check if that works for you... — kukkuz
– kukkuz, Commented Sep 7, 2016 at 14:26
Sorry! Horizontal scrollbar of course - will fix original post. — user1702401
– user1702401, Commented Sep 7, 2016 at 14:30
is this what you try to do ? jsbin.com/pelimecisa/1/edit?html,css,output — G-Cyrillus
– G-Cyrillus, Commented Sep 7, 2016 at 14:36
@GCyrillus Exactly! Min-width instead of width is the solution, thanks! — user1702401
– user1702401, Commented Sep 7, 2016 at 18:03

DBS · Accepted Answer · 2016-09-07 14:37:02Z

4

Use min-width and max-width rather than width on the table cells. This will prevent the table from resizing the <td> to fit the table at 100% width, which is its default behaviour.

#wrap {
  overflow-x: auto;
}

table {
  table-layout: fixed;
  width: auto;
}

td {
  background-color: yellow;
  min-width: 400px;
  max-width: 400px;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<div id="wrap">
  <table>
    <tr>
      <td>First</td>
      <td>Second</td>
    </tr>
  </table>
</div>
</body>
</html>

edited Sep 7, 2016 at 14:37

answered Sep 7, 2016 at 14:31

DBS

10.1k4 gold badges40 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user1702401 Over a year ago

Thanks! That's the correct solution - I was not aware about width vs min-width behavior on that situation.

Sergey Korost · Accepted Answer · 2016-09-07 14:34:27Z

0

try using table-layout: fixed; The horizontal layout only depends on the table's width and the width of the columns, not the contents of the cells

table {
    table-layout: fixed;
    width: 100%; /* width property required */
}

answered Sep 7, 2016 at 14:34

Sergey Korost

11 bronze badge

Collectives™ on Stack Overflow

Table with fixed-width columns - without specifying table width

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related