Html 表行底部边框“；“屈曲”；在特定的窗口大小_Html_Css

Html 表行底部边框“；“屈曲”；在特定的窗口大小

html css

Html 表行底部边框“；“屈曲”；在特定的窗口大小,html,css,Html,Css,我正在制作一个简单的表格来显示信息，并希望在每行的底部都有一个边框。我折叠了边框以消除行与行之间的空间，以避免边框加倍。它工作得很好，但当我调整屏幕尺寸时，有时边缘似乎会断裂或弯曲，在那里它会稍微移位。我附上了这一现象的图像这是整张桌子：这是我的CSS： table{ border-collapse: collapse; } tbody{ width: 100% !important; } th{ width: 8%; padding-left: 4%; fo

我正在制作一个简单的表格来显示信息，并希望在每行的底部都有一个边框。我折叠了边框以消除行与行之间的空间，以避免边框加倍。它工作得很好，但当我调整屏幕尺寸时，有时边缘似乎会断裂或弯曲，在那里它会稍微移位。我附上了这一现象的图像

这是整张桌子：

这是我的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;
}

这有什么办法吗？还是更多的是我的内容问题

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

实际渲染的是一系列高度略有变化的单元格，每个单元格都有自己的底边，底边是从父元素

tr

中提取的值解析出来的

一种替代方法可能是使用

thead

元素包装第一行，并使用

tbody

元素包装每个连续行，然后将它们设置为

display:block

with

border bottom

您可以找到一些不同的解决方案，但这里的主要问题只是对边界如何作用于表元素的误解，W3C链接应该有助于解决这一问题

在较小的尺寸下，此表格将无法读取，因此我还建议您阅读，并避免使用基于百分比和视口的单位作为字体大小和填充。