如何在一个表中特宽幅列瓜分？ [英] How is extra width in a table divided up among columns?
问题描述
我今天想知道它是如何在HTML表格中多余的空间（超出什么内容请求）被列之间拆分。令人惊讶的我连一个很好的协议googleing后找到了答案。于是我赶紧嘲笑了一个最简单的页面，并把它的考验。
＆LT; HTML和GT;＆LT; HEAD＆GT;
＆LT;风格类型=文/ CSS＆GT;
TD，DIV {
边框：1px的纯黑色;
}
＆LT; /风格＆GT;
＆LT; /头＆GT;＆LT;身体GT;
＆LT;表格的宽度= 500＆GT;
＆所述; TR＆GT;
＆LT; TD＆GT;＆LT; DIV的风格=宽度：200像素;＆GT;大TD＆LT; / DIV＆GT;＆LT; / TD＆GT;
＆LT; TD＆GT;＆LT; DIV的风格=宽度：100像素;＆GT;小TD＆LT; / DIV＆GT;＆LT; / TD＆GT;
＆LT; / TR＆GT;
＆LT; /表＆gt;
＆LT; /身体GT;＆LT; / HTML＆GT;
结果（谷歌浏览器）是这样的：
根据它似乎浏览器按比例分配额外的空间。给列额外的空间的比例，他们最初请求的空间量的百分比。考虑到这一点，这篇文章有三个目的：
- 其中，这种行为记录为别人的地方找到
- 我想知道，这是真的对于所有浏览器？ （尝试在你的）
- 如下是真正的问题，是有办法使用CSS来改变这种行为的方法吗？特别是让浏览器均匀地分配列中的特宽幅？
您或许可以通过应用Flexbox的CSS规则改变水平空间分配。请查看 http://the-echoplex.net/flexyboxes/ 和玩的第一个数字该柔性属性。这个数字决定了什么样的元素会得到什么额外的空间和多少。
I was wondering today how it is that excess space in an HTML table (above and beyond what the content is requesting) is split among the columns. Surprisingly I couldn't find the answer even after a good deal of googleing. So I quickly mocked up the simplest possible page and put it to the test.
<html><head>
<style type="text/css">
td, div{
border: 1px solid black;
}
</style>
</head><body>
<table width=500>
<tr>
<td><div style="width: 200px;">Big td</div></td>
<td><div style="width: 100px;">Small td</div></td>
</tr>
</table>
</body></html>
The result (in google chrome) looks like this:
Based on that it seems that browsers allocate the additional space proportionally. Giving columns a percentage of the additional space proportional to the amount of space they originally requested. With that in mind, this post serves three purposes:
- A place where this behavior is documented for others to find
- I'm wondering, is this true for all browsers? (try it on yours)
- And here's the real question, is there a way to use CSS to change this behavior? Specifically to have the browser allocate the extra width evenly among the columns?
You can probably change the horizontal space allocation by applying flexbox CSS rules. Check out http://the-echoplex.net/flexyboxes/ and play around with the first number in the "flex" attribute. That number determines what elements get what extra space and how much.
这篇关于如何在一个表中特宽幅列瓜分？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
