![边框折叠]( "边框折叠")
解决方案如 @Bolt 解释了为什么会发生这种情况，我将为您提供一个解决方案，您可以使用您的CSS中的以下代码段隐藏空单元格 th：empty，td：empty { border：0 ; } 演示 使用：empty pseudo ，我设置 border：0; 所以物理上元素出现在页面上，我们只是定位空单元格的样式，并设置 c> 到 0 。 ：none; ，因为它会破坏您的表布局，因此如果您想保持边框折叠，使用上述代码段就足够了。 注意：使用的选择器是一个通用选择器，并且将全局定向，如果你想特定的元素，考虑使用类代替 .table_class_name th：empty， .table_class_name td：empty { / *样式在这里* / } I can use the CSS property border-collapse to combine the borders of adjacent table cells. And I can use empty-cells to hide table cells that have no content. But when I use both, the empty-cells property has no effect and empty cells are always visible. At least there's a border around each of them, even where multiple adjacent rows and columns are empty.Here's an example:<!doctype html><html><head><style>table{ border-collapse: collapse; border-spacing: 0;}th,td{ empty-cells: hide; border: solid 1px black; padding: 2px 4px;}</style></head><body><table><tr> <th></th> <th></th> <th>Header 3</th></tr><tr> <th></th> <th></th> <th>Header 3</th></tr><tr> <td>Cell 1</td> <td>Cell 2</td> <td></td></tr><tr> <td>Cell 1</td> <td>Cell 2</td> <td></td></tr></table></body></html> 解决方案 As @Bolt explained why this happens, I will provide a solution for this, you can use the below snippet in your CSS to hide the empty cellsth:empty, td:empty { border: 0;}DemoUsing :empty pseudo, I set the border: 0; so physically the element is present on the page, we just target the styles of the empty cells and set the borders to 0.I didn't used display: none; as it will spoil your table layout, so using the above snippet is enough if you want to keep the border collapsed.Note: The selector am using is a general selector and will target globally, if you want to target the element specifically, consider using a class instead like .table_class_name th:empty,.table_class_name td:empty { /* Styles goes here */} 这篇关于为什么CSS属性边框折叠和空单元格冲突？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！ 上岸，阿里云！ 08-31 02:39