html - html表头多级布局

Question

我需要帮助来实现如下表头布局

X X X X X X     X     X
            Y Y Y Y Y

理想情况下，没有第二个标题的 X 居中

我到目前为止看起来像下面的代码，但它不起作用

<table>
<thead>
	<tr>
		<th>X</th>
		<th>X</th>
		<th>X</th>
		<th>X</th>
		<th>
			<tr>
				<th>X</th>
			</tr>
			<tr>
				<th>Y</th>
				<th>Y</th>
				<th>Y</th>
				<th>Y</th>
				<th>Y</th>
				<th>Y</th>
			</tr>
		</th>
		<th>X</th>
		<th>X</th>
		<th>X</th>
	</tr>
</thead>
</table>

标签： htmlcss

Answer 1

你可以很简单地通过向 , 中添加两个<tr>元素<thead>然后使用rowspan:

<table>
  <thead>
    <tr>
      <th rowspan="2">X</th>
      <th rowspan="2">X</th>
      <th rowspan="2">X</th>
      <th rowspan="2">X</th>
      <th rowspan="2">X</th>
      <th rowspan="2">X</th>
      <th rowspan="2">Y</th>
      <th rowspan="2">Y</th>
      <th>X</th>
      <th rowspan="2">Y</th>
      <th rowspan="2">Y</th>
      <th rowspan="2">X</th>
    </tr>
    <tr>
      <th>Y</th>
    </tr>
  </thead>
</table>