Html table column issue
This html:
<html>
<head></head>
<body style="width:100%;">
<table style="width:100%;">
<tr>
<td>foo</td>
<td>bar</td>
<td>fizz</td>
<td&g开发者_开发知识库t;buzz</td>
</tr>
</table>
</body>
</html>
Draws:
Problem is that I need something like this:
- First two columns should "stick" together
- Second column should expand and use unused space
- 3rd and 4th column should "stick" together like first two does
Any suggestions how to make this right?
<table style='width:100%'>
<col width="1" />
<col>
<col width="1" />
<col width="1" />
<tr>
<td>foo</td>
<td>bar</td>
<td>fizz</td>
<td>buzz</td>
</tr>
</table>
this will make first, third and 4th as small possible, while second column takes the rest of the width.
Give them % width (in tagname or CSS)
body must be 100 % width too
exemple tagname:
html file:
<td width="10%"></td>
exemple css:
html file:
<td id="foo"></td>
css file :
#foo { width: 10%; }
Or use javascript if you want to calculate width in pixel. (I recommande jQuery for compatibility)
jQuery .innerWidth()
Or fixed widths for foo, bar, fizz and buzz columns and inject another column in the middle as third - it should automatically span over the available space.
Set a fixed width on "foo", "fizz", and "buzz". Give "bar" 100% width.
EDIT:
<table style='width:100%'>
<col>
<col width="100%" />
<col>
<col>
<tr>
<td>foo</td>
<td>bar</td>
<td>fizz</td>
<td>buzz</td>
</tr>
</table>
This should give the second column 100% width and allow the contents in the other columns to expand as well. I've tested this in Firefox 3.6 and Chrome 9.
加载中,请稍侯......
精彩评论