html - 修复背景色 td 表

Question

我对这些表格的布局有疑问。一个表有 3 列，另一个有 2 列。

“colspan”值匹配且正确 (30)，每个“TD”都有设定的宽度，但紫色也超过绿色。 (您可以通过将页面缩放 300% 来注意到它)。

当然，如果我在表 2 中添加一个新列，并更正它的 colspan 和 width，问题就解决了。

还有其他方法可以解决这个问题吗？

谢谢!

<table style="width: 60px; height: 40px; border: 1px solid rgba(160,141,163,0.5); border-spacing: 0px; position: absolute;">
	<tbody>
		<tr>
			<td style="background-color: rgba(196, 110, 239, 0.28); width: 36px; height: 1px;" colspan="18"></td>
			<td style="background-color: rgba(143, 254, 163, 0.5); width: 22px; height: 1px;" colspan="11"></td>
			<td style="width: 2px; height: 1px;" colspan="1"></td>
		</tr>
	</tbody>
</table>

<table style="width: 60px; height: 40px; border: 1px solid rgba(173,180,179,0.5); border-spacing: 0px; position: absolute;">
	<tbody>
		<tr>
			<td style="background-color: rgba(196, 110, 239, 0.28); width: 36px; height: 1px;" colspan="18"></td>
			<td style="width: 24px; height: 1px;" colspan="12"></td>
		</tr>
	</tbody>
</table>

Answer 1

几件事:

首先: Colspan 确实与您遇到的问题无关，但是我不完全理解您在这里使用 colspan 的意图。每个表只有 1 行，colspan 实际上什么也没做。

第二:当使用固定宽度的列时，使用table-layout:fixed在你的表格元素上。 https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout

第三:这很可能是您遇到问题的原因:表格单元格 ( <td>) 默认情况下有一些填充，这会在视觉上减少所有单元格的宽度，您的单元格越多有在表中(当使用固定宽度时)。这就是为什么您的第一个表(有 3 列)的第一个单元格比您的第二个表(只有 2 列)小。其他 2 个单元由于填充而迫使它变小。设置padding: 0在这些细胞上可以消除这种情况。

第四:您在表格上的固定宽度没有加起来，因为您没有考虑表格上的左右边框，这又增加了 2px。例如，您将第一个表格定义为 60px 宽

• 第 1 列 = 36
• 第 2 列 = 22
• 第 3 栏 = 2
• 左+右边框=2

总实际宽度 = 62px

固定表格演示(使用 CSS，因为那些内联样式让我眼花缭乱)。

table {
 table-layout: fixed;
 width: 60px;
 height: 40px;
 border: 1px solid rgba(173,180,179,0.5);
 border-spacing: 0;
 position: absolute;
}
table tr td {
 padding: 0;
 margin: 0;
}

table tr td:nth-child(1) {
 background-color: rgba(196, 110, 239, 0.28);  width: 34px;
}

table tr td:nth-child(2) {
 background-color: rgba(143, 254, 163, 0.5); 
}
table.table1 tr td:nth-child(2) {
 width: 22px;
}
table.table2 tr td:nth-child(2) {
 width: 24px;
}

table.table1 tr td:nth-child(3) {
 background-color: rgba(196, 110, 239, 0.28); 
 width: 2px;
}

<table class='table1'>
  <tbody>
    <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </tbody>
</table>

<table class='table2'>
  <tbody>
    <tr>
      <td></td>
      <td></td>
    </tr>
  </tbody>
</table>