HTML 2 个表的列跨度

Question

我正在尝试创建一个 table，它基本上是 1 中的两个 table：

第一个顶部 table 有 3 个部分
第二个底部 table 有 5 个部分（如附图，原谅我的画功太差）

我尝试这样做，但它看起来有点古怪（excel 附上复制的图片）

有人知道如何解决这个问题吗？

谢谢！

Answer 1

最大的问题是 colspan 不是均分（它必须是整数而不是浮点数），因为 5 不是 3 的乘数。我建议尝试使用 2 个单独的 tables.

table{ 
  width:300px; 
  text-align:left; 
  border-collapse: collapse; 
  font:20px Arial; 
  resize: auto;
  overflow: hidden;
}

table th{ font-size:1.2em; color:white; }
table th:nth-child(1){ background: LightSkyBlue; }
table th:nth-child(2){ background: MediumOrchid; }
table th:nth-child(3){ background: YellowGreen; }
table td{ border:1px solid silver; }

.header{
 background: LightSkyBlue;
 color: white;
 text-align: center;
}

<table>
  <thead>
    <tr>
      <th colspan=2>1
      <th colspan=2>2
      <th colspan=2>3
  <thead>
  <tbody>
    <tr>
      <td colspan=2>1
      <td colspan=2>2
      <td colspan=2>3
    </tr>
    <tr class='header'>
      <td colspan=5>secnod header
    </tr>
    <tr>
      <td>1
      <td>2
      <td>3
      <td>4
      <td>5
    </tr>
  <thead>
</table>

您还可以在“主要”的单元格 (<td>) 中添加 <table> table:

table{ 
  width:300px; 
  text-align:left; 
  border-collapse: collapse; 
  font:20px Arial; 
  resize: auto;
  overflow: hidden;
}

table th{ font-size:1.2em; color:white; }
table th:nth-child(1){ background: LightSkyBlue; }
table th:nth-child(2){ background: MediumOrchid; }
table th:nth-child(3){ background: YellowGreen; }
table td{ border:1px solid silver; padding:0; }

table table{
  width: 100%;
  height: 100%;
  resize: none;
}

table table thead{ text-align: center; }

<table>
  <thead>
    <tr>
      <th>1
      <th>2
      <th>3
  <thead>
  <tbody>
    <tr>
      <td>1
      <td>2
      <td>3
    </tr>
    <tr>
      <td colspan=3>
        <table>
          <thead>
            <tr>
              <th colspan=5>Header
          <thead>
          <tbody>
            <tr>
              <td>1
              <td>2
              <td>3
              <td>4
              <td>5
            </tr>
          <thead>
        </table>
      </td>
    </tr>
  <thead>
</table>

Answer 2

这不是很好的做法，但您可以添加另一个内部元素


 <tfoot>
<tr class='header'>
      <td colspan=5>secnod header
    </tr>
    <tr>
      <td>1
      <td>2
      <td>3
      <td>4
      <td>5
    </tr> </tfoot>

HTML 2 个表的列跨度

HTML Column Span for 2 Tables

html

css

html-table