Html 制作 td 填充表格宽度
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/14862838/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Making a td fill table width
提问by Twinone
I have a table that has a fixed height of 50px and 100% width.
我有一个固定高度为 50px 和 100% 宽度的表格。
Inside that table I have two divs, on the same line, like this:
在那个表里面我有两个 div,在同一行,像这样:
<table>
<tr>
<td>
<div id="1"></div>
</td>
<td>
<div id="2"></div>
</td>
</tr>
</table>
The first div has float:left
, and the second has float:right
.
第一个 div 有float:left
,第二个有float:right
。
So the table is 100% of the page. I want div2 to wrap it's contents, and div1 to fill the remaining space so that div2 is aligned to the right like this:
所以表格是页面的 100%。我希望 div2 来包装它的内容,而 div1 来填充剩余的空间,以便 div2 像这样向右对齐:
+--------------------------------------------------------------+
| [ DIV 1 (Expands) ][ DIV 2 AND ITS CONTENTS ] |
+--------------------------------------------------------------+
and what I currently get when div1 has less contents than a full line:
以及当 div1 的内容少于整行时我目前得到的结果:
+--------------------------------------------------------------+
| [ DIV 1 ][ DIV 2 ] |
+--------------------------------------------------------------+
Without a table I can get it to work floating left and right directly, but then when they "get together", they will wrap under each other instead of next to each other.
如果没有桌子,我可以让它直接左右浮动,但是当它们“聚在一起”时,它们会相互包裹而不是彼此相邻。
EDIT: I've added a new jsfiddle here. This is the working example. Try removing all but one links from the left div, and see the result. The second div should stay at the most-right. I hope I explained myself.
编辑:我在这里添加了一个新的 jsfiddle 。这是工作示例。尝试从左侧 div 中删除除一个链接之外的所有链接,然后查看结果。第二个 div 应该留在最右边。我希望我解释了自己。
回答by tymeJV
Use the "colspan" property of td. Ex:
使用 td 的“colspan”属性。前任:
<td colspan=75%> info </td>
回答by Twinone
Solved adding the width:100%
to the table.
解决了将width:100%
加到表中的问题。
table {
width:100%;
}
回答by Vitaly Schekin
Just add width: 100%
to first td
and browser will fill it's width automatically.
只需添加width: 100%
到第一个td
,浏览器将自动填充它的宽度。
回答by JohnFx
First, your table doesn't appear to be set to the full width of the page at all. You want to add a width style or width attribute to the markup.
首先,您的表格似乎根本没有设置为页面的全宽。您想向标记添加宽度样式或宽度属性。
Next just set a fixed width on the right "div" (or more accurately <TD>
) and the first one will fill the remaining space.
接下来只需在右侧的“div”(或更准确地说<TD>
)上设置一个固定宽度,第一个将填充剩余空间。
As others have pointed out, the wrapper table seems unnecessary though.
正如其他人指出的那样,包装表似乎没有必要。