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

发布于 2024-12-04 08:20:21 字数 972 浏览 0 评论 0原文

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

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

可重现的 HTML（使用 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>

我尝试过：

table-layout:fixed
span 容器与 display:inline-block set
div container with inline block

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

有人可以帮忙吗？

编辑

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

我试图在不指定表格显式宽度的情况下执行此操作。只有 TD 才会迫使表格变宽，这（应该？）迫使容器变宽。

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

原文

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.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

江挽川 2024-12-11 08:20:21

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

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

回复收藏 0 原文

千年*琉璃梦 2024-12-11 08:20:21

在我的问题中使用我的 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>

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>

回复收藏 0 原文

~没有更多了~