Question

我正在尝试创建一个表，其中两行都是三个单元格。我希望第一行是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>

我不知道我在做什么错，但这一直使我发疯。我尝试了其他colspans组合，其中一些有效，而另一些则不行。

编辑：

我要实现的新图片： link

Answer 1

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

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>

Answer 2

我相信这就是你想要的

<table width="100%">
   <tr>
       <td colspan="3" width="33%">a</td>
       <td width="33%">b</td>
       <td width="33%">c</td>
   </tr>
   <tr>
       <td width="10%">1</td>
       <td width="10%">2</td>
       <td colspan="3" width="80%">3+4</td>
    </tr>
</table>

科尔斯潘可使用某些组合，但不适用于其他组合

2 个答案: