Menu
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:fixedspan container with display:inline-block setdiv container with inline blockIt 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.
811
<!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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
