Question

如何制作这样的表格，第一行--1个单元格，第二行--2个单元格，第3行--3个单元格，每行中的所有单元格具有相同的大小？有可能吗？

Answer 1

一个oldskool技巧是在第三行嵌套一个表。像这样：

<!DOCTYPE html>
<html>
<head>
<style>
.two-column {
 width: 50%;
}
.three-column {
  width: 33.3%;
}
</style>

</head>

<body>
<table class="my-table">
  <tr>
    <td colspan="3">Row 1 column 1</td>
  </tr>
  <tr>
    <td class="two-column">Row 2 column 1</td>
    <td class="two-column" colspan="2">Row 2 column 2</td>
  </tr>
  <tr>
    <td colspan="3">
        <table class="my-nested-table">
            <tr>
                <td class="three-column">Row 3 column 1</td>
                <td class="three-column">Row 3 column 2</td>
                <td class="three-column">Row 3 column 3</td>
            </tr>
        </table>
    </td>
  </tr>
</table>
</body>

</html>

Answer 2

这是一个更简单的解决方案

CSS：

table {
  width: 100%;
  border: none;

}
.td_b {
  border: 1px solid black;
}

HTML：

<table>
  <tr>
   <td>
    <table>
     <tr>
      <td class="td_b">1st</td>
     </tr>
    </table>
   </td>
  </tr>
  <tr>
   <td>
    <table>
     <tr>
      <td class="td_b">1st</td>
      <td class="td_b">2nd</td>
     </tr>
    </table>
   </td>
  </tr>
  <tr>
   <td>
    <table>
     <tr>
      <td class="td_b">1st</td>
      <td class="td_b">2nd</td>
      <td class="td_b">3rd</td>
     </tr>
    </table>
   </td>
  </tr>
</table>

以下是JSFiddle指向

的链接

另一个解决方案是：

CSS：

table {
  width: 100%;
  border: none;
}
td {
  border: 1px solid black;
}
.td_1 {
  width: 100%;
}
.td_2 {
  width: 50%;
}
.td_3 {
  width: 33%;
}

HTML：

<table>
  <tr>
    <td class="td_1" colspan="6">1st</td>
  </tr>
  <tr>
    <td class="td_2" colspan="3">1st</td>
    <td class="td_2" colspan="3">2nd</td>
  </tr>
  <tr>
    <td class="td_3" colspan="2">1st</td>
    <td class="td_3" colspan="2">2nd</td>
    <td class="td_3" colspan="2">3rd</td>
  </tr>
</table>

以下是JSFiddle示例

第一行表 - 1个单元格，第2行 - 2个单元格，第3行 - 3个单元格

2 个答案: