CSS 边框半径和边框折叠 [英] CSS border radius and border collapse
问题描述
我正在尝试在 CSS 中设置一个边框半径为 12px 的表格.表格中的 tr 或 td 没有边框，只有一个边框围绕整个地块.我希望表格中的第一行在顶部 2 个角上有一个边界半径，但在底部 2 个角上没有(所以它就像表格的标题)我设法做到了.但是，这会在表格和第一行之间创建一个白色边框 - 我希望它们彼此相邻而没有白色边框，因为标题行具有彩色背景.
I'm trying to have a table with a border-radius of 12px set in CSS. There is no border on the tr or td within the table, just the one border around the whole lot. I want the first row in the table to have a border-radius on the top 2 corners but not on the bottom 2 (so it is like a header for the table) which I have managed to do. However, this is creating a white border between the table and this first row - I want them to be right up to each other without the white border as the header row has a coloured background.
我已尝试使用边框折叠来执行此操作，但这会抵消整个表格上的边框半径，使标题行在顶部 2 个角上呈圆形，但位于方形表格内.
I've tried using border-collapse to do this, but this cancels out the border-radius on the overall table, making the header row rounded on the top 2 corners but inside a squared off table.
这很难解释，因此可以在此处找到示例.您可以看到表格和蓝色背景行之间的白色边框.
This is quite difficult to explain so an example can be found here. You can see the white border between the table and the row with the blue background.
有没有人知道如何在没有边界崩溃的情况下摆脱边界?提前致谢
Has anyone got any ideas how to get rid of the border without border-collapse? Thanks in advance
推荐答案
试试这个:
显然，您可以将该内联样式拉入其自己的类中，但我想明确地向您展示，表格上的边框间距正是您所追求的. Obviously you can pull that inline style out into its own class, but I wanted to explicitly show you that border-spacing on the table is what you're after. 如果您不希望文本紧贴表格的边框，您应该/可以为表格内的内容添加一些填充. You should/could add some padding to the content inside the table if you don't want the text to be snug against the table's border. 这篇关于CSS 边框半径和边框折叠的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
登录
关闭
