修复背景色td表

Question

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

“colspan”值匹配并且是正确的（30）并且每个“TD”具有设定宽度，但是紫色也是绿色。 （您可以通过缩放300％的页面来注意它。）

当然，如果我在表2中添加一个新列，纠正colspan并对其进行宽度调整，问题就解决了。

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

谢谢！

<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的意图。每桌只有一排，colspan真的没有做任何事情。

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

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

第四：您桌面上的固定宽度不会相加，因为您没有考虑桌面上的左右边框，这会增加另外2px。例如，您将第一个表定义为 60px 宽

• Col 1 = 36
• Col 2 = 22
• Col 3 = 2
• 左+右边界= 2

总实际宽度= 62px

修复了桌面演示（使用CSS，导致那些内联样式让我眼前一亮）。

＆＃13;

＆＃13;

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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;