-1

我想创建一个包含 3 列的表：在左侧和右侧固定宽度的列（被位置：固定 - div 遮挡）和中间的可变宽度列。

这不起作用：

<table>
    <tr>
        <td width=202px></td>
        <td> [MYCONTENT] </td>
        <td width=200px></td>
    </tr>
</table>

问题是，由于某种原因，浏览器（在 Chrome 和 Firefox 上测试）认为，当浏览器窗口不够宽时，我的意思并不是真的：外列被裁剪，宽度设置被忽略，因此真正的内容在我的 div 下滑动，变得完全无法访问。

我剩下的唯一想法是使用 1990 年代的透明像素，将其调整为 200 像素宽度，但我一想到就不寒而栗。肯定有更好的方法吗？

（顺便说一句，是的，我尝试过各种纯 css 布局，但没有一个是合适的，例如，如果您对中间列使用溢出：自动，底部的滚动条也会滚动（！！）这意味着如果页面都更高并且比窗口宽,你必须先向下滚动才能看到滚动条,然后水平滚动,然后可能再次向上滚动以首先查看您想看到的内容。我还尝试使用填充：强制所需的边距在左侧和右侧，但是当浏览器窗口不够宽时，这也会被忽略。）

4

2 回答 2

1

表格用于表格数据，如果您想布局内容，您应该使用 CSS。

如果您在 CSS 方面遇到困难，我建议您使用Twitter Boostrap 之类的东西。

如果您真的只是想要一个特定的解决方案，请查看“css 3 列布局流体中心”之类的术语的结果- 我不是在欺骗您，那里确实有很好的答案，正是您想要的，还有很多搜索结果会将您带到这些页面（尤其是 manisheriar.com 和 A List Apart 文章）。

您可以使用 min-width（在中间 div 上）和 max-width - 以及媒体查询 - 来帮助控制在较小窗口中发生的情况。

于 2012-08-20T15:39:27.013 回答
1

好的-这里有桌子。

http://jsfiddle.net/sheriffderek/wAGKp/2/

我想简短的回答是——

  • 从 html 中取出样式并使用选择器。（本例中的类”，然后是 min-width --- 和 width...
  • 另外 - 请记住，填充和边距会改变你的东西的宽度......所以你可以使用边界框方法......（它是rad）并包含在第二个......使得填充保持在原始 div 大小 --- 希望这会有所帮助。

这就是我要做的方式。（没有桌子......）

http://jsfiddle.net/sheriffderek/GBtdy/1/

于 2012-08-20T17:46:14.043 回答