HTML Table帮助交替显示单元格数
[英]HTML Table help alternating number of cells
问题描述
如果要替换每行中的单元格数量，正确的HTML是什么？ 我想要2个单元格是第1行，第3行，第2行，第2行，第3行，第4行等...类似于砖墙。 到目前为止，我已经掌握了这个功能，但是它并没有呈现我想要的效果。 我知道我可以做这个嵌套表，但是我可以用一个表做吗？
<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
您不能具有像元跨度的小数宽度。 相反，您需要找到上下限范围内行数的最小公分母。 在您的示例中，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>
请注意，表格宽度很容易被2和3整除，并且在每个单元格中都明确设置了宽度。
解决方案2
0 2009-10-24 21:38:57
一种方法是通过CSS。 您将设置一个所需的表（例如4x4），然后将其适当地应用于每个单元格。 将有两种样式，砖块和空的，一种表示“砖”，另一种表示空的空间。
因此，您可以执行以下操作：
<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
我非常确定colspans必须具有整数值，不允许使用小数。 您可以尝试在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>
帮助解决HTML验证错误：“表格”列的开头没有单元格
[英]Help with HTML validation error: Table column has no cells beginning in it
HTML表格，每行中包含不同数量的单元格：如何在单元格中均匀分隔单元格？
[英]HTML table with different number of cells in each row: how to space the cells evenly in their row?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.