我如何构建一个表格标题，而不是跨越HTML中的多行？ [英] How can I construct a table header than spans multiple rows in HTML?

问题描述

我想建造一个表格如下：

  |主要标题1 |主要标题2 | 
 | Minor1 | Minor2 | Minor3 | Minor4 | 
 ---------------------------------------------- 
 | col1 | col2 | col3 | col4 | 
其余的表... 
  

看看TH元素只有1行，我怎样才能构建标题行，如列排队？层次表似乎不是一个好的选择，因为列宽不会排队，而且我也不能使用两行TH标签和colspan。

>解决方案

这就是我要做的事情（在 http://jsfiddle.net / 7pDqb / ）在Chrome中测试。

th，td {border：1px solid black}

< table> < THEAD> < TR> < th colspan =2> Major 1< / th> < th colspan =2> Major 2< / th> < / TR> < TR> <的第i; COL1< /第> <的第i; COL2< /第> <的第i; COL3< /第> <的第i; COL4< /第> < / TR> < / THEAD> < TBODY> < TR> < TD> DATA1< / TD> < TD> DATA2< / TD> < TD> DATA3< / TD> < TD> DATA4< / TD> < / TR> < / tbody>< / table>

I would like to construct a table as follows:

|   Major Heading 1    |  Major Heading 2    |
|   Minor1  |  Minor2  | Minor3  |  Minor4   |
----------------------------------------------
|   col1    |   col2   |   col3  |    col4   |
rest of table ...

Seeing as how there is only 1 line for TH elements, how can I construct the header row such as the columns line up? Hierarchical tables doesn't seem like a good option because the column widths won't line up, and I also can't use two rows with TH tags with colspan.

解决方案

This is how I would do it (working fiddle at http://jsfiddle.net/7pDqb/) Tested in Chrome.

th, td { border: 1px solid black }

<table>
  <thead>
    <tr>
      <th colspan="2">Major 1</th>
      <th colspan="2">Major 2</th>
    </tr>
    <tr>
      <th>col1</th>
      <th>col2</th>
      <th>col3</th>
      <th>col4</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>data1</td>
      <td>data2</td>
      <td>data3</td>
      <td>data4</td>
    </tr>
  </tbody>
</table>

这篇关于我如何构建一个表格标题，而不是跨越HTML中的多行？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！