固定宽度的表格力在容器上展开答案

【问题标题】：Fixed-width column table force expand on container固定宽度的表格力在容器上展开
【发布时间】：2011-11-16 15:24:05
【问题描述】：

显然是一个经典问题，但我发现的“解决方案”没有奏效，包括关于 SO 的各种其他问题。

如果我的表格比它的容器宽，我希望我的表格单元格宽度保持固定，而不是调整大小以适应容器。

可重现的 HTML（使用 PHP 生成的<td>s）：

<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>

我尝试过的：

table-layout:fixed
span 带有display:inline-block 设置的容器
div 带有内联块的容器

似乎应该有一种简单的方法可以让前面的代码生成一个溢出正文的表格。

有人可以帮忙吗？

编辑

我之前的措辞可能不太清楚，但我想自己指定列宽。

我正在尝试在不为表格指定明确宽度的情况下执行此操作。只有 TD 会强制表格变宽，这（应该？）强制容器变宽。

此外，内联 CSS 仅用于示例目的。

【问题讨论】：

table-layout:fixed 将解决问题。删除您为 td. 指定的内联样式。您正在指定宽度。当您不指定 td 的宽度时，tds 会根据内容调整大小，并且固定表格布局不会调整大小以适应内容
@Bala - 见编辑。我希望 <td>s 是一个设定的宽度。如果我没有在<td>s 上设置宽度，那么问题就无效了。
您可以分享生成的 HTML 代码或让我知道它是否可以在线查看。
这篇文章的未来读者：我的问题中的源 HTML 已在我下面的答案中用有效的解决方案复制（再次感谢 Bala）。

标签： html css html-table width overflow

【解决方案1】：

<!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>

【讨论】：

BAM，谢谢。我知道有一个简单的解决方案：p 我错过了width:100%。干杯!我的可重现代码如下，带有正确的 CSS。

【解决方案2】：

在我的问题中使用我的 HTML，这是正确的标记，@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>

【讨论】：