【问题标题】:HTML - Spacing between rows in tableHTML - 表格中行之间的间距
【发布时间】:2018-03-21 06:19:55
【问题描述】:

我有一个使用 rowspan 组合 2 行的表。我希望 2 个非组合行之间的间距更近,同时保持整个行之间的间距更大。例如,我希望row1 col1row2 col1 之间的间距更近,同时row2 col1row3 col1 之间的间距更大。这将适用于每一行。

table {
    border-collapse: collapse;
}

td {
    border-bottom: 1px solid black;
}

.noborder {
	border:none;
}
<table>
	<tr>
		<td class="noborder">row1 col1</td>
		<td rowspan=2>merge col2</td>
	</tr>
	<tr>
		<td>row2 col1</td>
	</tr>
	<tr>
		<td class="noborder">row3 col1</td>
		<td rowspan=2>merge col2</td>
	</tr>
	<tr>
		<td>row4 col1</td>
	</tr>
	<tr>
		<td class="noborder">row6 col1</td>
		<td rowspan=2>merge col2</td>
	</tr>
	<tr>
		<td>row6 col1</td>
	</tr>
</table>

【问题讨论】:

  • 一种解决方案可能是您可以在每个表格行之后添加一个空行,例如&lt;tr&gt;&lt;td class="noborder"&gt;&amp;nbsp;&lt;/td&gt;&lt;/tr&gt;

标签: html css html-table


【解决方案1】:

这是什么?但是当您使用一列和第二行时,您的 td 无效。请改用 colspan (https://www.w3schools.com/TAGs/att_td_colspan.asp) 属性。

table {
        border-collapse:separate; 
        border-spacing:5px;
    }

【讨论】:

  • 如何使用 colspan 合并 2 行?
  • @Matt9Atkins 可以使用 rowspan 与 colspan 相同的功能,但在行上
猜你喜欢
  • 2023-03-06
  • 1970-01-01
  • 2014-05-28
  • 1970-01-01
  • 2021-08-07
  • 2019-02-06
  • 2015-01-20
  • 2012-08-01
  • 1970-01-01
相关资源
最近更新 更多