HTML表格有助于交替的单元格数量

StackOverflow https://stackoverflow.com/questions/1619179

  •  06-07-2019
  •  | 
  •  

题

如果我想要交替每行中的单元格数，那么HTML是什么？我希望2个单元格是第1行，第3行是第2行，第2行是3，第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>
有帮助吗？

解决方案

您不能拥有单元格跨度小数宽度。相反，您需要找到较低和较高范围中行数的最小公分母。在你的例子中，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整除，宽度会在每个单元格中明确设置。

其他提示

一种方法是通过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">&nbsp;</td><td></td><td></td><td></td></tr>
<tr><td class="brick">&nbsp;</td><td class="brick">&nbsp;</td><td></td><td></td></tr>
<tr><td class="brick">&nbsp;</td><td class="brick">&nbsp;</td><td class="brick">&nbsp;</td><td></td></tr>
<tr><td class="brick">&nbsp;</td><td class="brick">&nbsp;</td><td class="brick">&nbsp;</td><td class="brick">&nbsp;</td></tr>
</table>
</body>
</html>

<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>

我很确定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>
许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top