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

问题描述

我想构造一个表格如下:

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

鉴于 TH 元素只有 1 行，如何构建标题行，例如列对齐?分层表似乎不是一个好的选择，因为列宽不会对齐，而且我也不能使用带有 colspan 的 TH 标记的两行.

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.

推荐答案

这就是我要做的(工作在 http://jsfiddle.net/7pDqb/) 在 Chrome 中测试.

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