如何为HTML中的所有table-colspans设置一定的高度？

Question

我想自动为表格中的所有colspans设置/定义一定的高度。 （空）colspans只是在每隔一行中可视地分离表内容（如屏幕截图所示）。

他们的身高必须是20px。我现在非常糟糕的解决方案：为每个（！）colspan提供相同的id，从CSS定义高度。但是，我必须手动操作1000次！我相信必须有一个更容易的选择来解决这个问题。

Answer 1

正如Lister先生所说，你最好使用border-spacing，而不是试图把rowspan代替colspan。您可以将表格设置为具有顶部或底部间距，使其均匀分布，对于顶部和底部可以是10px，对于其中一个也可以是20px，它应该具有相同的效果。这样你只需要在css中设置一次，而不是手动设置＆＃39; 1000x。

Answer 2

这是您可以如何定位表中的每一行。请记住：n-child并不适用于旧版本的IE。

也不要使用ID但是课程。

＆＃13;

＆＃13;

.mytable tr:nth-child(2n+2){
  height: 20px !important;
}

＆＃13;

<table cellpadding="0" cellspacing="0" border="1" width="400" class="mytable">
	<tr>
		<td align="center">
			col1
		</td>
		<td align="center">
			col2
		</td>
		<td align="center">
			col3
		</td>
	</tr>
    <tr>
		<td align="center" colspan="3">
			colspan
		</td>
    </tr>
	<tr>
		<td align="center">
			col1
		</td>
		<td align="center">
			col2
		</td>
		<td align="center">
			col3
		</td>
	</tr>
    <tr>
		<td align="center" colspan="3">
			colspan
		</td>
    </tr>
	<tr>
		<td align="center">
			col1
		</td>
		<td align="center">
			col2
		</td>
		<td align="center">
			col3
		</td>
	</tr>
</table>

＆＃13;

＆＃13;

＆＃13;

Answer 3

只需通过CSS中的attribute selector选择这些行中的表格单元格：

[colspan] { height: 20px; }

Answer 4

尝试FlexBox

<div class="table">
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
</div>

.table {
  display: flex;
  flex-wrap: wrap;
  width: 200px;
}

.table .col {
  width: 33%;
  height: 20px;
  border: solid 1px #000;
  box-sizing: border-box;
}

.table .col:nth-child(4n+4) {
  width: 100%;
  background: red;
}

现场演示 - https://jsfiddle.net/5z6v28L7/