Fixed-width column table force expand on container
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:fixedspancontainer withdis开发者_运维百科play:inline-blocksetdivcontainer 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.
<!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>
Using my HTML in my question, here's the correct markup, compliments of @Bala.
<html>
<head></head>
<body>
<table style='table-layout:fixed;width:100%'>
<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>
加载中,请稍侯......
精彩评论