html表应该溢出答案

【问题标题】：html table should overflowhtml表应该溢出
【发布时间】：2017-08-13 16:15:46
【问题描述】：

我有一个有两列的表。第一个（包含一个菜单）应该有一个固定宽度，而第二个（包含一些页面内容）的宽度可以变化。表格应该溢出窗口（默认情况下不会溢出），否则如果内容非常宽，浏览器会减小菜单列的宽度。但是我不能为表格定义一个固定的宽度（导致它溢出），因为我不知道内容的宽度。

Overflow:scroll

似乎不适用于表格。我会感谢解决方法/解决方案。

<table class="rootTableContent">
<tr>
    <td id="rootTableMenu">             
    </td>
    <td id="rootTableContent">
    </td>
</tr>

【问题讨论】：

您需要提供比这更多的代码。我不确定您到底面临什么问题。也许在 www.jsfiddle.net 上发布一些代码
你是不是只用表格布局？
表应该溢出什么？如果你不给表格一个固定的宽度，那么它会拉伸以适应它的容器。这就是它的工作原理。我建议绘制您希望页面行为的图表，然后我们可以建议适当的 HTML 和 CSS 来实现这一点。（答案可能不是表格）
请不要使用表格进行布局。想想孩子们！
这可以通过 div 轻松实现。请不要在网站布局中使用表格

标签： html scroll html-table overflow

【解决方案1】：

解决这个问题的方法是使用适当的 CSS（Divs/Spans 等）来布局您的网站，而不是表格。我完全赞成使用表格来显示表格数据，你会看到我在它们有效的地方为它们争论，但这不是其中之一。

这很容易通过以下方式完成：

<div style="float:left; width: 150px">
   Navigation Code Here
</div>
<div style="float: left">
   Other Content Here
</div>
<div style="clear:both"></div>

显然，我过度简化了这个解决方案，您将拥有更具体的代码来处理您的布局（需要更多详细信息来更具体地提供帮助）但是，使用正确的工具来完成这项工作很重要。

【讨论】：

“轻松”是什么意思？改变整个布局需要很长时间，而这几乎不可能在有限的时间内完成。
@Jan-Frederik Carl，我不同意。在您对正确的 CSS 布局感到满意之前只需要额外的时间。我同样被拖到那里，又踢又叫。但为了比较的目的，我现在可以在 3 小时内用完全兼容的 CSS 从 .psd 进行完整的网站切割和组装。就像您保留示例代码一样基本，我希望这不会超过 20-30 分钟以 HTML 和 CSS 组装，从头到尾。

【解决方案2】：

正如其他人所说，请不要使用<table> 布局。它陈旧、笨重，而且会让屏幕阅读器和其他无障碍软件感到困惑。

如果你绝对坚持使用你的方法，你可以试试这个：

Live Demo

<style type="text/css">
div.wrap {
    overflow-y: auto;
    width: 75%;
}
div.wrap table {
    border: 1px solid #000;
    width: 100%;
}
div.wrap table td {  
    padding: 20px;
}
</style>

<div class="wrap">
  <table class="rootTableContent">
    <tr>
      <td id="rootTableMenu">rootTableMenu</td>
      <td id="rootTableContent">rootTableContent</td>
    </tr>
  </table>
</div>

【讨论】：

不得不提一下，这个布局我还没建！