- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
如果我在 table 标签上设置了 border-collapse 属性,我的边框半径不会显示。我需要 border-radius 属性,如果我删除 border-collapse 属性,我不会得到我想要的外观,即灰色部分会到达表格的最边缘。
解决这个问题的方法是什么,原因是什么?
提前致谢
* {
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
根本不会影响边框半径,它还会给你边框和内部内容之间没有空格的结果。
在搜索中,同时使用 collapse 和 radius 似乎有一些异常。还有一些解决方法,您可以在表格子项上使用伪标签,专门让半径起作用,但是当您可以使用 border-spacing 删除边框与其内部内容之间的空间时,为什么要浪费所有时间
与 border-radius
编辑: 通过将伪选择器与 border-space: 0
一起使用,您可以获得更明显的边框半径。
我们想要定位每个与表格元素边缘接壤的 td 元素。table tr td:first-of-type
和 table tr td:last of type
获取左侧和右侧。然后我们将每个后续的第一个和最后一个 child 作为目标来获得 Angular 落。最后,如果这是一个动态表,并且您将在表中放置超过 两个
数据表,请添加 td:not(:first-child):not(:last-child)
在每个类型的第一个和最后一个。
我没有得到我想要的外观,灰色部分一直延伸到表格的边缘。
* {
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>
关于html - 由于边框折叠属性,表格的边框半径不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/65238188/
我有 2 个表:city 和 city_neighbor。 city 包含所有城市的列表,而 city_neighbor 包含给定城市的邻居:insert into city_neighbor (ci
我需要一点帮助来了解我使用 RADIUS+LDAP 的无线登录是否足够安全。 我有这样的基础设施:PC 客户端 (Linux) + ASUS AP Wireless + FreeRadius 和 OP
我正在为我的应用程序使用 Google Maps iOS sdk。在我的应用程序中,用户可以绘制一个栅栏(一个圆圈),然后可以编辑以更改和调整圆的半径。 它的大小调整正确但是当半径值改变它的瞬间时,不
我想为我的搜索表单使用传单标记(用于 latLng)和 slider (用于半径)。 mongodb 部分将像 location: { $geoWithin: { $centerSpher
我有一个有背景的 ImageView。我需要将 border-radius 设置到我的 ImageView。我在另一个 XML 文件中使用以下代码并将其设置为 android:src 但是当我设置背景
我正在使用 Bing Maps API 构建一个 javascript 应用程序,我想根据中心点和扇形参数构成扇形几何图形。 我在 PostgreSQL 数据库中有一个表“points”,顶部是 Po
我在我的游戏中创建了一个 ATriggerSphere 实例,并将其放置在我角色的位置,如下所示: //Create activate trigger radius activateRadiusTri
我有对图像应用一些变换以检测圆圈的代码 (GaussianBlur->cvtColor(gray)->canny->HoughCircles) 结果我得到了vector circles;数组。 如果我
在我使用 bootsrap 3 的 Rails 应用程序中,我的导航栏上似乎有一个奇怪的 4px 边界半径,我似乎无法摆脱它。 我试过了 .navbar { border-radius: none
你好我想做半圆旋转轮。所以我为此使用了iCarousel。我的问题是如何根据屏幕尺寸改变轮子的半径。 这些是我的约束。 这个红色 View 是 iCarousel View 最佳答案 有一个值 iCa
我正在尝试: 没有角半径。 所有角半径 == 10dp。 是否有可能以及如何指定角:10dp(左上)10dp(右上)0 0(下)? 最佳答案 在 Android 开发者中 http://devel
我正在使用来自 https://developers.google.com/maps/documentation/javascript/examples/drawing-tools 的这个例子使用户能
我对 MySql 相当陌生,我想要创建一个过程,在其中我可以插入任何邮政编码和距离,然后取回该距离内的所有邮政编码。我确实找到了一个公式并尝试根据我的需要 reshape 它,但我无法做到。我所拥有的
我通过 RomainNurik 使用库向用户显示 Undo-Toast(如在 Gmail 应用程序中) 在 KitKat 之前,toast 选项是矩形的,而在 KitKat 中,toast 消息是圆角
默认情况下,iPad 模态表单获得圆角。在一些 Apple 的应用程序中,例如 iTunes,表单具有完美的方角。是否有一种相对简单的方法可以删除不会让我被 App Store 拒绝的圆角半径? 最佳
我的数据库有各种兴趣点。我希望用户根据他们的位置看到他们。还有3个按钮,显示2km/5km/15km半径内的兴趣点。我无法对这些半径实现放大功能。所以我正在寻找缩放系数(从 2 到 21)和物理距离(
使用 CSS,我可以在选项卡导航器中设置选项卡顶 Angular 的圆 Angular 半径: .tabstyle { corner-radius: 10;
我有这个标签,我只想在右上角和左上角做圆 Angular 。但它最终绕过了所有 4 个 Angular 。 我做了什么: 和 我的 pageStyles.css 文件是: .my
有人可以帮助我在我的谷歌地图标记周围添加一个圆/半径吗? function createMarker ( size, i,id,lat,lng,pin,title,counter,image,pr
我的网站布局很奇怪(由我的客户设计),但我开发得很好。 问题是 Chrome(版本 22)不工作,但在 Firefox(版本 16)和 IE 9 中工作。 问题出在 colRight 中,有两个 di
我是一名优秀的程序员,十分优秀!