Fixed-width column table force expand on container

html css html-table width overflow

22,856

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>
<div style="margin: 0pt auto; width: 980px;">
  <div style="500px;overflow:scroll">
    <table style="width: 100%; table-layout: fixed;">
      <tbody>
        <tr>
          <td style="width:150px;border-right:1px solid black;">This is 150px wide.</td>
          <td style="width:150px;border-right:1px solid black;">This is 150px wide.</td>
          <td style="width:150px;border-right:1px solid black;">This is 150px wide.</td>
          <td style="width:150px;border-right:1px solid black;">This is 150px wide.</td>
          <td style="width:150px;border-right:1px solid black;">This is 150px wide.</td>
          <td style="width:150px;border-right:1px solid black;">This is 150px wide.</td>
          <td style="width:150px;border-right:1px solid black;">This is 150px wide.</td>
          <td style="width:150px;border-right:1px solid black;">This is 150px wide.</td>
          <td style="width:150px;border-right:1px solid black;">This is 150px wide.</td>
          <td style="width:150px;border-right:1px solid black;">This is 150px wide.</td>
          <td style="width:150px;border-right:1px solid black;">This is 150px wide.</td>
          <td style="width:150px;border-right:1px solid black;">This is 150px wide.</td>
          <td style="width:150px;border-right:1px solid black;">This is 150px wide.</td>
          <td style="width:150px;border-right:1px solid black;">This is 150px wide.</td>
          <td style="width:150px;border-right:1px solid black;">This is 150px wide.</td>
        </tr>
      </tbody>
    </table>
    <div style="background:chartreuse;width:150px">This is 150px wide.</div>
  </div>
</div>
</body>
</html>

22,856

Author by

Ben

javascript 1167th user (yes!) php 1312th user (wow!) html 476th user (he's good!) css 360th user (quick, hire this guy!) Proud owner of the Tumbleweed badge (his weaknesses are actually strengths!)

Updated on August 13, 2020

Comments

Ben almost 4 years
Apparently a classic problem, but the "solutions" I've found haven't worked, including various other questions on SO.

If my table is wider than its container, I want my table cell width to remain fixed and not be resized to fit the container.

Reproducible HTML (<td>s generated with PHP):
```
<html>
  <head></head>

  <body>
    <table>
      <tr>
        <?php for($i=0;$i<15;$i++) { 
           echo "<td style='width:150px;border-right:1px solid black;'>".($i+1)."</td>"; 
        } ?>
      </tr>
    </table>
    <div style='background:chartreuse;width:150px'>This is 150px wide.</div>
  </body>
</html>
```
What I've tried:
- table-layout:fixed
- span container with display:inline-block set
- div container with inline block
It seems there should be an easy way to make the previous code generate a table that overflows the body.

Can someone help?

Edit

It may not be clear from my previous wording, but I want to specify column width myself.

I'm trying to do this without specifying an explicit width for the table. Only the TDs will force the table wider, which (should?) force the container wider.

Also, the inline CSS is there for example purposes only.
Ben over 12 years

BAM there it was thanks. I knew there was an easy solution :p I was missing width:100%. Cheers! My reproducible code is below, with the correct CSS.