使用rowspan colspan的html表答案

【问题标题】：html table using rowspan colspan使用rowspan colspan的html表
【发布时间】：2016-11-14 15:14:59
【问题描述】：

我正在尝试创建一个如下所示的表..

table, td {
  border-collapse: collapse;
  border: 2px solid blue;
}

<table>
  <tr>
    <td rowspan='6' colspan='6'>&nbsp;</td>
    <td rowspan='4'>&nbsp;</td>
  </tr>
  <tr>
  </tr>
  <tr>
  </tr>
  <tr>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>

在我的代码中，空行是否导致它误打印表格？你能说出为什么浏览器渲染不正确吗？还是逻辑上的缺陷？

【问题讨论】：

它看起来是正确的，你能解释一下问题是什么吗？哦，等一下……好吧，它看起来没有正确打印 6x6，对吧？
而且 4 x 1 看起来像 1 x 1（如果您运行嵌入式 sn-p）或 3 x 1（如果您在 chrome 中运行）！（请取尺寸为 row x col）
好的，看看我的回答，看看是不是这样。
@Ankur 看起来这里没有问题。如果问题是它的样子，那只是因为我猜没有内容

标签： html css html-table

【解决方案1】：

您需要更新单元格尺寸的 CSS。

这是你可以做的。

table,
td {
  border-collapse: collapse;
  border: 2px solid blue;
  text-align: center;
}
table {
  width: 100%;
  height: 350px;
}
td {
  width: 50px;
  height: 50px;
}

<table>
  <tr>
    <td rowspan='6' colspan='6'>6X6</td>
    <td rowspan='4'>4X1</td>
  </tr>
  <tr>
  </tr>
  <tr>
  </tr>
  <tr>
  </tr>
  <tr>
    <td>1
    </td>
  </tr>
  <tr>
    <td>2
    </td>
  </tr>

  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>

【讨论】：

基本上，在不知道表格高度的情况下，rowspans 和 colspans 无法计算出它们需要的宽高。所以设置每个单元格的高度和宽度应该告诉每个单元格需要多少，然后计算正确的行跨度和列跨度值。您的标记没有太大变化。但是需要针对 td 的宽度和高度修改 css。
:) 以 px 为单位提供尺寸也可以对
进行 .. 因此，这些是要代替的选择 .. 是的，没有洗牌根据“更改”在答案中打开..只是提供的尺寸在起作用..

是的，完全正确@Ankur。标记没有变化，更新了我的 cmets

即使我不是使用表格布局的倡导者，我更喜欢其他标记元素

【解决方案2】：

在这种情况下，我建议您使用div 浮动布局而不是table 布局。添加11个float:left风格的div块会更容易解决

【讨论】：

是的，该选项当然存在..但只是想知道为什么它不能正确渲染..仅此而已