Html 固定宽度列表在容器上强制展开_Html_Css_Html Table_Width_Overflow

Html 固定宽度列表在容器上强制展开

html css

Html 固定宽度列表在容器上强制展开,html,css,html-table,width,overflow,Html,Css,Html Table,Width,Overflow,显然这是一个经典问题，但我发现的“解决方案”并不奏效，包括其他各种问题如果我的表格比它的容器宽，我希望我的表格单元格宽度保持不变，而不是调整大小以适应容器可复制的HTML（使用PHP生成的代码）：无标题文件这是150像素宽。这是150像素宽。这是150像素宽。这是150像素宽。这是150像素宽。这是150像素宽。这是150像素宽。这是150像素宽。这是150像素宽。这是150像素宽。这是150像素宽。这是150像素宽。这是150像素宽。这是150像素宽。这

显然这是一个经典问题，但我发现的“解决方案”并不奏效，包括其他各种问题

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

可复制的HTML（使用PHP生成的代码）：



无标题文件
这是150像素宽。
这是150像素宽。
这是150像素宽。
这是150像素宽。
这是150像素宽。
这是150像素宽。
这是150像素宽。
这是150像素宽。
这是150像素宽。
这是150像素宽。
这是150像素宽。
这是150像素宽。
这是150像素宽。
这是150像素宽。
这是150像素宽。
这是150像素宽。
在我的问题中使用我的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>


表布局：修复将解决此问题。删除您为td提供的内联样式。您正在指定宽度。如果不指定td的宽度，则tds将根据内容调整大小，并且给定固定的表格布局将不会调整大小以适应当前的环境content@Bala-见编辑。我希望
s是一个设置的宽度。如果我没有设置
的宽度，那么问题就无效了。你可以共享生成HTML代码，或者让我知道它是否可以在线查看。这篇文章的未来读者：我的问题的源HTML已在我下面的答案中复制，并提供了有效的解决方案（再次感谢Bala）。BAM，谢谢。我知道有一个简单的解决办法：p I缺失宽度：100%。干杯下面是我的可复制代码，带有正确的CSS。
<!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>

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