表行底部边框＆＃34;屈曲＆＃34;在某些窗口大小

Question

我正在创建一个简单的表来显示信息，并希望在每行的底部有一个边框。我折叠了边框以移除行之间的空间，以避免边框加倍。它工作正常，但是当我调整屏幕尺寸时，边框似乎会在稍微移位的地方断裂或弯曲。我附上了这种现象的图像。

以下是整个表格：

这是我的CSS：

  table{
  border-collapse: collapse;
}

tbody{
  width: 100% !important;
}

th{
  width: 8%;
  padding-left: 4%;
  font-size: 1.5vw;
  padding-top: 2%;
}

td{
  width: 20%;
  font-size: 1.5vw;
  padding-top: 2%;
}

td ul {
  width: 90%;
}

td ul li {
  padding-top: 10%;
  text-align: center;
  padding-bottom: 10%;
}

tr{
  border-bottom: solid 1px black !important;
}

这有什么办法吗？或者更重要的是我的内容？

Answer 1

您的表格行边框仅作为border-collapse algorithm中冲突解决的副作用。表格行不具有边框，但由于应用了样式并且边框已折叠，浏览器会尝试通过将父项的边框样式应用于其所包含的相应单元格来解决任何可能存在冲突的样式。

实际渲染的是一系列高度略有不同的单元格，每个单元格都有自己的底部边框，这些边框是从父tr元素的值中解析的。

一种替代方法可能是使用thead元素包装第一行，并使用tbody元素包装每个连续行，然后使用display: block将它们设置为border-bottom。

你可以找出一些不同的解决方案，但这里的主要问题只是对边框如何处理表格元素的误解，而W3C链接应该有助于对其进行排序。

在小尺寸时，此表无法读取，因此我还建议您阅读Richard Rutter on designing tables to be read，同时避免使用基于百分比和视口的单位进行字体大小和填充。