如何将一列 TH 放在一行 TH 中答案

【问题标题】：How to place a column of TH in a row of TH如何将一列 TH 放在一行 TH 中
【发布时间】：2016-02-17 11:29:07
【问题描述】：

我想制作一个带有“<th> split”的 HTML 表格，如下所示：

我尝试通过使用rowspan 和colspan 拆分<th> 标记来制作HTML 表格，但我需要它与图片中的完全一样。

【问题讨论】：

那么你的尝试是什么样子的，它在哪里以及究竟有哪些不足之处？

【解决方案1】：

无需 css https://jsfiddle.net/parthmy007/s7v70dk7/

<table border="1">
    <thead>
        <tr>
            <th rowspan="4">Items</th>
            <th rowspan="4">Type</th>
            <th rowspan="4">Type</th>
            <th colspan="4">Values</th>
            <th>Values</th>
            <th rowspan="4">Date</th>
                    <th rowspan="4">Date</th>
        </tr>
        <tr>
            <th colspan="4">Before</th>
            <th >Before</th>

        </tr>
        <tr>
            <th colspan="5">Before</th>



        </tr>

       <tr>
            <th colspan="4">Before</th>
            <th >Before</th>
        </tr>

    </thead>
    <tbody></tbody>
</table>

https://jsfiddle.net/parthmy007/s7v70dk7/

【讨论】：

【解决方案2】：

                                        <tr>
                                            <th rowspan="3">Client</th>
                                            <th rowspan="3">Apt No</th>
                                            <th rowspan="3">Sq.ft Area</th>
                                            <th rowspan="3">Listed Price</th>
                                            <th>Date 28-FEB-2015</th>
                                            <th>Date 28-FEB-2015</th>
                                            <th>Date 28-FEB-2015</th>

                                        </tr>
                                        <tr>
                                              <th>1st Instalment</th>
                                              <th>2nd Instalment</th>
                                              <th>3rd Instalment</th>

                                        </tr>
                                        <tr>
                                              <th>10%  status</th>
                                              <th>10%  status</th>
                                              <th>10%  status</th>

                                        </tr>
</table>

【讨论】：

【解决方案3】：

不需要rowspan，因为您将使用内表来组成4行JS Fiddle

table {
  width: 98%;
  height: 160px;
  margin: 0 auto;
  text-align: center;
  border-collapse: collapse;
}
td {
  border: 2px solid black;
}
#t1 table {
  width: 100%;
}

<table id="t1">
  <tr>
    <td>TD</td>
    <td>TD</td>
    <td>TD</td>
    <td>
      <table>
        <tr>
          <td>TD</td>
          <td>TD</td>
        </tr>
        <tr>
          <td>TD</td>
          <td>TD</td>
        </tr>
        <tr>
          <td colspan="2">TD</td>
        </tr>
        <tr>
          <td>TD</td>
          <td>TD</td>
        </tr>
      </table>
    </td>
    <td>TD</td>
    <td>TD</td>
  </tr>
</table>

【讨论】：

【解决方案4】：

这是我能想到的：https://jsfiddle.net/ryrL79pr/

<html>
<body>


<table>

<tr>
  <th rowspan="4">A</th>
  <th rowspan="4">B</th>
  <th rowspan="4">C</th>
  <th>
    <table>
      <tr>
        <th>1</th>
        <th>2</th>
      </tr>
    </table>
  </th>
  <th rowspan="4">D</th>
  <th rowspan="4">E</th>
  <th rowspan="4">F</th>
</tr>

<tr>
  <th>
    <table>
      <tr>
        <th>1</th>
        <th>2</th>
      </tr>
    </table>
  </th>
</tr>

<tr>
  <th>3</th>
</tr>

<tr>
  <th>
    <table>
      <tr>
        <th>1</th>
        <th>2</th>
      </tr>
    </table>
  </th>
</tr>
</table>

希望有帮助！

【讨论】：