HTML Table帮助交替显示单元格数
[英]HTML Table help alternating number of cells
问题描述
What is the proper HTML if I want to alternate the number of cells in each row? 
如果要替换每行中的单元格数量，正确的HTML是什么？ I want 2 cells is row 1, 3 in row 2, 2 in 3 , 3 in 4 etc... Similar to a brick wall. 我想要2个单元格是第1行，第3行，第2行，第2行，第3行，第4行等...类似于砖墙。 I have this so far, but it doesn't render like I would like. 到目前为止，我已经掌握了这个功能，但是它并没有呈现我想要的效果。 I know I could do this nesting tables, but can I do this with one table? 我知道我可以做这个嵌套表，但是我可以用一个表做吗？
<table border="1" cellpadding="10">
<tr>
<td colspan="1.5"> <span> X </span> </td>
<td colspan="1.5"> <span> X </span> </td>
</tr>
<tr>
<td> <span> X </span> </td>
<td> <span> X </span> </td>
<td> <span> X </span> </td>
</tr>
<tr>
<td colspan="1.5"> <span> X </span> </td>
<td colspan="1.5"> <span> X </span> </td>
</tr>
<tr>
<td> <span> X </span> </td>
<td> <span> X </span> </td>
<td> <span> X </span> </td>
</tr>
<tr>
<td colspan="1.5"> <span> X </span> </td>
<td colspan="1.5"> <span> X </span> </td>
</tr>
<tr>
<td> <span> X </span> </td>
<td> <span> X </span> </td>
<td> <span> X </span> </td>
</tr>
</table>
4 个解决方案
解决方案1
4 已采纳 2009-10-24 21:32:14
You can't have a cell span fractional widths. 您不能具有像元跨度的小数宽度。 Instead, you need to find the least common denominator for the number of rows in the lower and upper ranges. 相反，您需要找到上下限范围内行数的最小公分母。 In your example, 2 and 3, which is 6 - so your table is 6 cells wide, with the even rows spanning 3 each and the odd rows spanning 2 each. 在您的示例中，2和3（即6）-因此表的宽度为6个单元格，偶数行分别跨越3，奇数行分别跨越2。
<table width="360">
<tr>
<td align="center" width="180" colspan="3">x</td>
<td align="center" width="180" colspan="3">x</td>
</tr>
<tr>
<td align="center" width="120" colspan="2">x</td>
<td align="center" width="120" colspan="2">x</td>
<td align="center" width="120" colspan="2">x</td>
</tr>
</table>
Note the table width is easily divisible by 2 and 3, and the widths are explicitly set in each cell. 请注意，表格宽度很容易被2和3整除，并且在每个单元格中都明确设置了宽度。
解决方案2
0 2009-10-24 21:38:57
One way to do it would be via CSS. 一种方法是通过CSS。 You would set up a table that is as large as you need it (4x4, for example), then apply a style to each cell as appropriate. 您将设置一个所需的表（例如4x4），然后将其适当地应用于每个单元格。 There would be two styles, brick and empty, one signifying a "brick" and the other signifying empty space. 将有两种样式，砖块和空的，一种表示“砖”，另一种表示空的空间。
So, you could do something like the following: 因此，您可以执行以下操作：
<html>
<head>
<style type="text/css">
td { border-style:none; width:30px; }
td.brick { border-style:solid; border-color:black; border-width:1px; }
</style>
</head>
<body>
<table>
<tr><td class="brick"> </td><td></td><td></td><td></td></tr>
<tr><td class="brick"> </td><td class="brick"> </td><td></td><td></td></tr>
<tr><td class="brick"> </td><td class="brick"> </td><td class="brick"> </td><td></td></tr>
<tr><td class="brick"> </td><td class="brick"> </td><td class="brick"> </td><td class="brick"> </td></tr>
</table>
</body>
</html>
解决方案3
-1 2009-10-24 21:32:06
<table>
<tr>
<td colspan="2">X</td>
<td colspan="2">X</td>
<td colspan="2">X</td>
<td>Y</td>
</tr>
<tr>
<td>Y</td>
<td colspan="2">X</td>
<td colspan="2">X</td>
<td colspan="2">X</td>
</tr>
解决方案4
-1 2009-10-24 21:34:25
I am pretty sure that colspans must have an integer value, fractions aren't allowed. 我非常确定colspans必须具有整数值，不允许使用小数。 You could try adding a dummy cell with 0 width, 0 padding, 0 margin on the 3-cell line. 您可以尝试在3单元格行上添加宽度为0，填充为0，边距为0的虚拟单元格。
<tr>
<td colspan="2"> <span> X </span> </td>
<td colspan="2"> <span> X </span> </td>
</tr>
<tr>
<td> <span> X </span> </td>
<td> <span> X </span> </td>
<td> <span> X </span> </td>
<td><!-- dummy !--></td>
</tr>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.