时间戳

首页 > 解决方案 > Colspan 适用于某些组合，但不适用于其他组合

html - Colspan 适用于某些组合，但不适用于其他组合

问题描述

我正在尝试创建一个表格，其中两行都是三个单元格。我希望第一行是 3 个等宽单元格，而第二行有 2 个等宽单元格（第一行单元格的每个 1/4）和第三个单元格，填满该行的其余部分。

这是我现在拥有的图片

我想在顶层表中合并 3+4，但是当我真正合并它们时，我得到了第二个表。这是我的小提琴：http: //jsfiddle.net/9n3oyf2w/

<!-- This works: -->

<tr>
  <td colspan="4">a</td>
  <td colspan="2">b</td>
  <td colspan="2">c</td>
</tr>
<tr>
  <td colspan="1">1</td>
  <td colspan="1">2</td>
  <td colspan="1">3</td>
  <td colspan="5">4</td>
</tr>

<!-- This doesn't work: -->

<tr>
  <td colspan="4">a</td>
  <td colspan="2">b</td>
  <td colspan="2">c</td>
</tr>
<tr>
  <td colspan="1">1</td>
  <td colspan="1">2</td>
  <td colspan="6">3+4</td>
</tr>

我不知道我做错了什么，但它一直让我发疯。我尝试过其他的 colspan 组合，其中一些有效，而另一些则无效。

编辑：

我想要实现的新图片： 链接

标签： htmlcss

解决方案

所以你想要这样的东西吗？

table, th, td{
  padding: 0;
  margin: 0;
  border-collapse: collapse;
  border:0;
  border-spacing:0;
  margin-left: auto;
  margin-right: auto;
}

table.topInnerTable, table.topInnerTable td{
  border: 1px solid black;
  border-bottom: 0;
}

table.bottomInnerTable, table.bottomInnerTable td{
  border: 1px solid black;
}
<table width="960px">
  <tr>
    <td>
      <table class="topInnerTable" width="100%">
        <colgroup>
          <col width="320px">
          <col width="320px">
          <col width="320px">
        </colgroup>
       <tr>
         <td>4</td>
         <td>4</td>
         <td>4</td>
       </tr>
      </table>
    </td>
  </tr>
  <tr>
    <td>
      <table class="bottomInnerTable">
       <tr>
         <td width="80px">1</td>
         <td width="80px">1</td>
         <td width="800px">10</td>
       </tr>
      </table>
    </td>
  </tr>
</table>

推荐阅读