CSS3的border-radius属性和border-collapse:collapse不混合.如何使用border-radius创建带圆角的折叠表？
在CSS3中，border-radius属性用于创建带有圆角的元素。而border-collapse: collapse属性用于合并表格边框。由于它们是不同的属性，因此它们不能直接混合使用。
要在折叠表格中使用带圆角的边框，您需要将border-radius属性应用于表格单元格。以下是一个示例：
<!DOCTYPE html>
<html>
<head><style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid black;
padding: 8px;
text-align: left;
}
th {
background-color: #f2f2f2;
}
td:first-child {
border-radius: 10px 0 0 10px;
}
td:last-child {
border-radius: 0 10px 10px 0;
}
</style>
</head>
<body><table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Row 1, Cell 1</td>
<td>Row 1, Cell 2</td>
</tr>
<tr>
<td>Row 2, Cell 1</td>
<td>Row 2, Cell 2</td>
</tr>
</table>
</body>
</html>在这个示例中，我们使用border-radius属性为表格的第一个和最后一个单元格添加圆角。这将使表格在折叠时看起来更加美观。
请注意，这个示例仅适用于固定的表格布局。如果您的表格是动态生成的，您可能需要使用JavaScript或其他脚本语言来动态计算圆角的大小和位置。
相关·内容
26回答
CSS3 3的边界半径属性和边界崩溃:崩溃不要混合。如何使用边框半径创建带圆角的折叠表？
html、css、rounded-corners、html-table
编辑-原来的标题：是否有一种在CSS中实现border-collapse:collapse的替代方法(以便有一个折叠的圆角表)？因为事实证明，简单地使表的边界崩溃并不能解决根本问题，所以我更新了标题以更好地反映讨论。
--我正试图使用CSS3 border-radius属性制作一个圆角表。我还想设置bo
浏览 14提问于2009-03-09得票数 377
回答已采纳
1回答
表边框没有给出期望的结果。
html、css
我试着做一个圆角的桌子，在<tr>'s之间有一个坚实的边框。然而，我似乎有一点问题，正确使用边界崩溃。当我设置border-collapse: separate时，我得到以下内容：
码
<tr> </tr>CSS
table,
浏览 1提问于2014-09-27得票数 3
回答已采纳
4回答
边框半径不适用于我的表
css
我将边界半径应用到我的表中，但它不起作用table { border-radius: 10px;}PS。我想使用border-collapse: collapse而不是border-collapse: separate
浏览 0提问于2014-05-23得票数 0
2回答
如何在没有CSS的情况下圆角？
html
我有一个2x1的单元格，在单元格1中有一个图像，在单元格2中有一个文本。我想要圆角，比如中的例子。我使用了border-radius，但我仍然有困难。我不能使用CSS，因为这是一个时事通讯，将通过电子邮件发送。我很感谢你的见解。<table border="3" width="723" cellspacing="0" cellpadding="0" style="bo
浏览 0提问于2017-10-10得票数 0
11回答
Twitter Bootstrap 3中的四舍五入表
css、twitter-bootstrap-3、html-table、rounded-corners
Bootstrap 3在桌面上掉落了圆角。当我应用.table-bordered类时，我应该应用哪些样式来取回它们呢？到目前为止，我已经完成了这段代码，没有任何效果。Bootstrap 2.3.2：{ -moz-border-radius: 4px;
border-radius
浏览 143提问于2013-09-11得票数 58
回答已采纳
3回答
表中有四舍五入的边框和行之间的边界。
html、css
我正在尝试制作一个具有圆角的全宽度表，整个表周围有一个边框，每个表行下都有一个边框(除了最后一个，不想加倍……)。: 10px; border: 1px solid black;
border-collapse: collapse;问:是否可以制作一个在Chrome、Safari和IE(8+)中工作的具有以下功能的表？整个桌子
浏览 8提问于2014-08-05得票数 0
回答已采纳
1回答
带圆角的HTML/CSS表格，javascript-边框更改无效
html、css、less
我有一张圆角的桌子。; .border-radius(@baseBorderRadius);这很好用。可以将元素拖动到表行中。Box-shadow和.scale就是这样工作的。但是边框没有改变( 3px和虚线)。原因是table-css元素：如果我移除它，拖放边框会改变，但我的边
浏览 3提问于2017-11-01得票数 0
3回答
边缘圆角的边框折叠？
javascript、html、css、reactjs、styling
我正在尝试渲染一个没有边框但边缘是圆角的React表格。我尝试使用border-collapse: collapse，它删除了表中列之间的边框，但也删除了我设置的边框半径属性。有没有人知道如何做到这一点？ border-radius: 4px;
backgroun
浏览 1提问于2016-08-16得票数 0
3回答
css如何增加可变文本的圆形图像按钮的大小
php、html、css
有谁能帮我解决如何增加圆角按钮的大小相对于文字。请检查图像：我希望能够写任何长度的文字和圆角按钮将自动伸展基于文字。
请帮助我如何编写CSS，以使这个工作？注意：我不想使用CSS3 border-radius，因为它在IE中不工作，我不想使用css3pie等等，这就是为什么我创建了圆角图像。谢谢
浏览 6提问于2011-07-25得票数 1
回答已采纳
2回答
以下是我到目前为止拥有的代码： <table style="margin-left: 10px; padding-right:0px; width: 710px;border-collapse:collapse; border-radius: 5px;"
class="ui-widget-content"><th>b</th&g
浏览 0提问于2012-01-16得票数 0
1回答
不使用边界半径属性的altova样式视觉或xsl-fo动态自由流表的曲线边界
xsl-fo、apache-fop、altova
我是Altova Stylevision和xsl-fo的新手。我需要有曲线边框的表格是动态的，并在多个页面上流动。边界-radius属性无法工作，因为在表级、行级和单元格级别上，xsl-fo processor.I都无法识别该属性，我无法给出在使用边框-radius属性时引发的确切异常，因为我已经使用跟踪版本完成了该异常http://www.w3.org/1999&#x
浏览 1提问于2014-08-18得票数 1
回答已采纳
17回答
IE9边界半径和背景梯度出血
internet-explorer-9、gradient、compass-sass、css
IE9显然能够使用CSS3标准的border-radius定义来处理圆角。下面是IE9中显示的图像：
我该如何解决这个问题？
浏览 22提问于2011-01-14得票数 191
回答已采纳
2回答
当使用边框半径时，内容会出现在一个角落上。
html、css
当使用CSS3 border-radius属性创建圆角时，如何保存内容(文本、图像等)从角落的顶端出现？这可能很难说，但我希望你们能理解这个问题。
浏览 2提问于2013-08-28得票数 1
回答已采纳
4回答
具有圆角和边框的表格标题
css、border、rounded-corners
表格标题可以有圆角和1px的边框吗？我该怎么做呢？progid:DXImageTransform.Microsoft.gradient(startColorstr='#eee', endColorstr='#ddd'); }
圆角应用于第一个和列表子元素th：-moz-border-radius: 6p
浏览 1提问于2012-06-06得票数 3
2回答
舍入html表体的角。
html、css、html-table、rounded-corners
这是一个CSS width: 250px; padding: 10px; box-shadow: 2px 2px 7px #888888; cursor: pointer;
cursor: han
浏览 2提问于2014-12-22得票数 6
回答已采纳
4回答
同时使用边框半径和长方体阴影(CSS)
webkit、css、mozilla
好吧，我知道这两个属性都还不完全受支持，但我还是在使用它们:P这个问题有可能解决吗？我还注意到-webkit-box-shadow与隐藏的div有一些问题。
浏览 2提问于2010-04-26得票数 48
回答已采纳
2回答
减少边界半径速记混入，禁用变量
variables、less、mixins、css、shorthand
我正在尝试为边界半径编写一个mixin，而不是仅当变量设置的值为>= 0时输出。我将变量中的基值设置为3px，例如，如果我输入-1或no，边界半径混合将不会在最终的样式表中创建任何属性。如果我想让每个角落都有相同的值，我可以让它起作用。但是，如果我想使用速记，即3px 3px 0 0，我无法解决如何让它工作。我认为这是一个问题，因为3px在两种情况下都是由变量和0改变的。我现
浏览 0提问于2013-04-18得票数 6
回答已采纳
1回答
仅使用CSS的HTML表的每一行的圆角？
html、css、html-table
我试图为一个简单的HTML表设置样式，在每一行和每一行的圆角之间留出空间，如下所示：
我对前端开发是新手，所以我只想使用CSS和HTML来掌握一些东西。到目前为止，我一直无法在每一行中得到圆角。我尝试将border-radius添加到table和tr元素中，但没有成功。将属性添加到td元素中是可行的，但我当然可以在每一项上获得
浏览 0提问于2019-12-18得票数 0
回答已采纳
6回答
如何将边框半径加到角垫桌上？
angular、angular-material、mat-table
我正试着把mat-table边界变成圆形的。但这是行不通的。试过这个- width: 100%; border-radius: 1em;如何做到这一点？
浏览 7提问于2020-03-04得票数 8
回答已采纳
5回答
为什么td边框半径被应用于内容，而不是边界。
html、css
我尝试将边框半径应用于表数据(td)元素，并在其周围设置一个边框。但只有内部内容有圆角，边框保持矩形。下面是一个轻巧的例子： padding: 10px; border-radius: 20px;}<
浏览 5提问于2017-01-10得票数 2
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频活动推荐
腾讯云开发者
