Question

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

这不起作用：

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

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

我唯一的想法是使用一个1990年代的透明像素调整到200px宽度，但我想到了这一点。肯定有更好的方法吗？

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

Answer 1

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

如果你在使用CSS，我建议使用像Twitter Boostrap这样的东西。

如果你真的只是想要一个特定的解决方案来查看像"css 3 column layout fluid center这样的术语的结果 - 我不是在愚弄你，那里确实有很棒的答案，这正是你想要的，而且很多搜索结果将带您到那些页面（特别是manisheriar.com和A List Apart文章）。

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

Answer 2

好的 - 这是表格。

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

我想简短的回答是 -

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

这就是我这样做的方式。（没有表......）

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

创建一个具有固定宽度列和可变宽度列的表

2 个答案: