Is it possible to make a table with lets say 4 columns with of 1 row with 100px in width, and then have to cells below with a with of 200px without having to create a new table?
是否可以制作一个表格,让我们说4列,1行,宽度为100px,然后必须使用200px的格式,而不必创建新表格?
Because if i do this, then when i set the width of 200px in new cells, the other cell changes width too.. i want the to new cells to expand to fill up the rest of the width left.
因为如果我这样做,那么当我在新单元格中设置200px的宽度时,另一个单元格也会改变宽度...我希望新单元格扩展以填充剩余的宽度。
Here an example..
这是一个例子..
<table border="1" width="100%">
<tr>
<td width="100px">1</td>
<td width="100px">2</td>
<td width="100px">3</td>
<td width="100px">4</td>
</tr>
<tr>
<td width="200px">5</td>
<td width="200px">6</td>
</tr>
</table>
2 个解决方案
#1
3
JsFiddle demo
you actally need to use colspan, so you code will be as below this will do the work you want
你实际上需要使用colspan,所以你的代码将如下所示将完成你想要的工作
<table border="1" width="100%">
<tr>
<td width="100px">1</td>
<td width="100px">2</td>
<td width="100px">3</td>
<td width="100px">4</td>
</tr>
<tr>
<td colspan="2">5</td>
<td colspan="2">6</td>
</tr>
</table>
<td colspan="number"> -number Specifies the number of columns a cell should span. Note: colspan="0" tells the browser to span the cell to the last column of the column group (colgroup)
-number指定单元格应跨越的列数。注意:colspan =“0”告诉浏览器将单元格跨越到列组的最后一列(colgroup)
#2
2
Try removing the cell width from the second row, but add an additional attribute to each of them, so it reads like:
尝试从第二行中删除单元格宽度,但为每个单元格添加一个附加属性,因此它的内容如下:
<td colspan="2"></td>
<td colspan="2"></td>
This should have both these cells account for 2 cells widths, without the need to redefine their widths.
这应该使这两个单元格占2个单元格宽度,而无需重新定义它们的宽度。
MDN TD - 属性Colspan
#1
3
JsFiddle demo
you actally need to use colspan, so you code will be as below this will do the work you want
你实际上需要使用colspan,所以你的代码将如下所示将完成你想要的工作
<table border="1" width="100%">
<tr>
<td width="100px">1</td>
<td width="100px">2</td>
<td width="100px">3</td>
<td width="100px">4</td>
</tr>
<tr>
<td colspan="2">5</td>
<td colspan="2">6</td>
</tr>
</table>
<td colspan="number"> -number Specifies the number of columns a cell should span. Note: colspan="0" tells the browser to span the cell to the last column of the column group (colgroup)
-number指定单元格应跨越的列数。注意:colspan =“0”告诉浏览器将单元格跨越到列组的最后一列(colgroup)
#2
2
Try removing the cell width from the second row, but add an additional attribute to each of them, so it reads like:
尝试从第二行中删除单元格宽度,但为每个单元格添加一个附加属性,因此它的内容如下:
<td colspan="2"></td>
<td colspan="2"></td>
This should have both these cells account for 2 cells widths, without the need to redefine their widths.
这应该使这两个单元格占2个单元格宽度,而无需重新定义它们的宽度。
MDN TD - 属性Colspan