Question

我想制作一个带有＆＃34; <th>拆分＆＃34;的HTML表格，如下所示：

我尝试通过使用<th>和rowspan分割colspan代码来制作HTML表格，但我需要它与图片完全相同。

Answer 1

不需要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>

Answer 2

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

if (typeof formData == "undefined") {
   //don't do file validation
}

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

Answer 3

以下是我能提出的问题：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 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

4 个答案: