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

Question

我想用“<th> 拆分”制作一个 HTML table，如下所示：

我试图通过使用 rowspan 和 colspan 拆分 <th> 标签来制作 HTML table，但我需要它，就像在图片。

Answer 1

不需要csshttps://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/

Answer 2

这是我能想到的：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>

希望对您有所帮助！

Answer 3

不需要 rowspan，因为您将使用内部 table 来组成 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>

Answer 4

                                        <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>

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

How to place a column of TH in a row of TH

html

html-table

css-tables