table 的边框半径由于边框折叠 属性 而无法正常工作
Border radius of table not working due to border-collapse property
如果我在 table 标签上设置了 属性 的 border-collapse,我的边框半径不会显示。我需要 border-radius 属性 打开,如果我删除 border-collapse 属性 我没有得到我想要的外观,这是灰色部分去到 [=28 的最边缘=].
解决这个问题的方法是什么,原因是什么?
提前致谢
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
table {
/*if i comment out the border-collapse property it then shows my radius*/
border-collapse: collapse;
margin: 25px 0;
width: 50%;
border-radius: 5px;
font-size: 1.4rem;
min-width: 400px;
border: 1px solid #c3c3c3;
/*margin is just for demo*/
margin: 20px 20px;
}
table tr {
border-bottom: solid 1px #d1d1d1;
}
table tr:nth-child(odd) {
background-color: #eee;
}
table td {
padding: 10px 15px;
}
table td:first-of-type {
font-weight: 600;
}
<table>
<tbody>
<tr>
<td>Application</td>
<td>Natural gas & LPG</td>
</tr>
<tr>
<td>Standards</td>
<td>BS EN ISO 9001:2008 - EN 331:1998</td>
</tr>
<tr>
<td>Connection</td>
<td>BSP Taper F</td>
</tr>
<tr>
<td>Finish</td>
<td>Plated</td>
</tr>
</tbody>
</table>
非常
如果您不想看到内容背景和边框之间有任何间距,则只需删除 border-collapse
并添加 border-spacing: 0
。 border-spacing: 0
根本不会影响边框半径,它还会给你边框和内部内容之间没有 space 的结果。
在搜索中似乎同时使用 collapse 和 radius 有一些异常。还有一些变通方法,你可以在 tables children 上使用伪标签,专门让半径起作用,但是当你可以删除 space 时,为什么要浪费所有时间在边界和它的内部内容之间使用 border-spacing
与 border-radius
一起工作
编辑: 通过将伪选择器与 border-space: 0
一起使用,您可以获得更明显的边框半径。
我们要定位每个与 table 元素边缘接壤的 td 元素。
table tr td:first-of-type
和 table tr td:last of type
得到左边和右边。然后我们针对每个后续的 first 和 last child 来获取角点。最后,如果这是一个动态 table 并且您将有超过 two
个数据 table 位于 table 中,请在第一个和最后一个上添加 td:not(:first-child):not(:last-child)
类型。
I don't get the look I want which is the grey sections to go to the very edge of the table.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
table {
/*add border-spacing: 0 instead of border-collapse: collapse*/
border-spacing: 0;
margin: 25px 0;
width: 50%;
font-size: 1.4rem;
min-width: 400px;
/*margin is just for demo*/
margin: 20px 20px;
}
/* Start psuedo child tags here, targeting each data elements relevant corners and sides */
table tr td:first-of-type {
border-left: 1px solid #c3c3c3;
}
table tr td:last-of-type {
border-right: 1px solid #c3c3c3;
}
/* :not(:first-child):not(:last-child)
This will get any potential data tables that are added
that are not sides or corners however, they are border
data tables on top or bottom */
table tr:first-of-type td:not(:first-child):not(:last-child){
border-top: 1px solid #c3c3c3;
}
table tr:last-of-type td:not(:first-child):not(:last-child){
border-bottom: 1px solid #c3c3c3;
}
table tr:first-of-type td:first-child {
border-top: 1px solid #c3c3c3;
border-top-left-radius: 5px;
}
table tr:first-of-type td:last-child {
border-top: 1px solid #c3c3c3;
border-top-right-radius: 5px;
}
table tr:last-of-type td:last-child {
border-right: 1px solid #c3c3c3;
border-bottom: 1px solid #c3c3c3;
border-bottom-right-radius: 5px;
}
table tr:last-of-type td:first-child {
border-left: 1px solid #c3c3c3;
border-bottom: 1px solid #c3c3c3;
border-bottom-left-radius: 5px;
}
/* End Psuedo tags here */
table tr {
border-bottom: solid 1px #d1d1d1;
}
table tr:nth-child(odd) {
background-color: #eee;
}
table td {
padding: 10px 15px;
}
table td:first-of-type {
font-weight: 600;
}
<div id="table">
<table>
<tbody>
<tr>
<td>Application</td>
<td>here is some data</td>
<td>Natural gas & LPG</td>
</tr>
<tr>
<td>Standards</td>
<td>some data in between</td>
<td>BS EN ISO 9001:2008 - EN 331:1998</td>
</tr>
<tr>
<td>Connection</td>
<td>some data in between</td>
<td>BSP Taper F</td>
</tr>
<tr>
<td>more tables</td>
<td>some data in between</td>
<td>more data</td>
</tr>
<tr>
<td>some more data still</td>
<td>some data in between</td>
<td>and yet more about this data</td>
</tr>
<tr>
<td>Finish</td>
<td>Plated</td>
<td>Plated too</td>
</tr>
</tbody>
</table>
</div>
如果我在 table 标签上设置了 属性 的 border-collapse,我的边框半径不会显示。我需要 border-radius 属性 打开,如果我删除 border-collapse 属性 我没有得到我想要的外观,这是灰色部分去到 [=28 的最边缘=].
解决这个问题的方法是什么,原因是什么?
提前致谢
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
table {
/*if i comment out the border-collapse property it then shows my radius*/
border-collapse: collapse;
margin: 25px 0;
width: 50%;
border-radius: 5px;
font-size: 1.4rem;
min-width: 400px;
border: 1px solid #c3c3c3;
/*margin is just for demo*/
margin: 20px 20px;
}
table tr {
border-bottom: solid 1px #d1d1d1;
}
table tr:nth-child(odd) {
background-color: #eee;
}
table td {
padding: 10px 15px;
}
table td:first-of-type {
font-weight: 600;
}
<table>
<tbody>
<tr>
<td>Application</td>
<td>Natural gas & LPG</td>
</tr>
<tr>
<td>Standards</td>
<td>BS EN ISO 9001:2008 - EN 331:1998</td>
</tr>
<tr>
<td>Connection</td>
<td>BSP Taper F</td>
</tr>
<tr>
<td>Finish</td>
<td>Plated</td>
</tr>
</tbody>
</table>
非常
如果您不想看到内容背景和边框之间有任何间距,则只需删除 border-collapse
并添加 border-spacing: 0
。 border-spacing: 0
根本不会影响边框半径,它还会给你边框和内部内容之间没有 space 的结果。
在搜索中似乎同时使用 collapse 和 radius 有一些异常。还有一些变通方法,你可以在 tables children 上使用伪标签,专门让半径起作用,但是当你可以删除 space 时,为什么要浪费所有时间在边界和它的内部内容之间使用 border-spacing
与 border-radius
编辑: 通过将伪选择器与 border-space: 0
一起使用,您可以获得更明显的边框半径。
我们要定位每个与 table 元素边缘接壤的 td 元素。
table tr td:first-of-type
和 table tr td:last of type
得到左边和右边。然后我们针对每个后续的 first 和 last child 来获取角点。最后,如果这是一个动态 table 并且您将有超过 two
个数据 table 位于 table 中,请在第一个和最后一个上添加 td:not(:first-child):not(:last-child)
类型。
I don't get the look I want which is the grey sections to go to the very edge of the table.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
table {
/*add border-spacing: 0 instead of border-collapse: collapse*/
border-spacing: 0;
margin: 25px 0;
width: 50%;
font-size: 1.4rem;
min-width: 400px;
/*margin is just for demo*/
margin: 20px 20px;
}
/* Start psuedo child tags here, targeting each data elements relevant corners and sides */
table tr td:first-of-type {
border-left: 1px solid #c3c3c3;
}
table tr td:last-of-type {
border-right: 1px solid #c3c3c3;
}
/* :not(:first-child):not(:last-child)
This will get any potential data tables that are added
that are not sides or corners however, they are border
data tables on top or bottom */
table tr:first-of-type td:not(:first-child):not(:last-child){
border-top: 1px solid #c3c3c3;
}
table tr:last-of-type td:not(:first-child):not(:last-child){
border-bottom: 1px solid #c3c3c3;
}
table tr:first-of-type td:first-child {
border-top: 1px solid #c3c3c3;
border-top-left-radius: 5px;
}
table tr:first-of-type td:last-child {
border-top: 1px solid #c3c3c3;
border-top-right-radius: 5px;
}
table tr:last-of-type td:last-child {
border-right: 1px solid #c3c3c3;
border-bottom: 1px solid #c3c3c3;
border-bottom-right-radius: 5px;
}
table tr:last-of-type td:first-child {
border-left: 1px solid #c3c3c3;
border-bottom: 1px solid #c3c3c3;
border-bottom-left-radius: 5px;
}
/* End Psuedo tags here */
table tr {
border-bottom: solid 1px #d1d1d1;
}
table tr:nth-child(odd) {
background-color: #eee;
}
table td {
padding: 10px 15px;
}
table td:first-of-type {
font-weight: 600;
}
<div id="table">
<table>
<tbody>
<tr>
<td>Application</td>
<td>here is some data</td>
<td>Natural gas & LPG</td>
</tr>
<tr>
<td>Standards</td>
<td>some data in between</td>
<td>BS EN ISO 9001:2008 - EN 331:1998</td>
</tr>
<tr>
<td>Connection</td>
<td>some data in between</td>
<td>BSP Taper F</td>
</tr>
<tr>
<td>more tables</td>
<td>some data in between</td>
<td>more data</td>
</tr>
<tr>
<td>some more data still</td>
<td>some data in between</td>
<td>and yet more about this data</td>
</tr>
<tr>
<td>Finish</td>
<td>Plated</td>
<td>Plated too</td>
</tr>
</tbody>
</table>
</div>