我能做一条圆角的桌线吗？
我能做一条圆角的桌线吗？
提问于 2010-02-04 17:26:54
我一直在使用HTML和CSS来设计我的简历样式，但我在设计元素样式时遇到了困难。
这在表中不起作用吗？
-moz-border-radius: 5x;
-webkit-border-radius: 5px;回答 5
Stack Overflow用户
回答已采纳
发布于 2010-02-04 17:32:05
是的，它可以在td和th元素的表中工作，但不能在tr上工作。您还可以在table上使用它来使整个桌子的角变圆。
如果要舍入一行单元格，以便舍入最左侧和最右侧的元素，则需要使用:first-child和:last-child伪类：
tr td:first-child {
-moz-border-radius-topleft: 5px;
-moz-border-radius-bottomleft: 5px;
-webkit-border-top-left-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
}
tr td:last-child {
-moz-border-radius-topright: 5px;
-moz-border-radius-bottomright: 5px;
-webkit-border-top-right-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
}IE6不支持first-child，虽然IE7添加了对它的支持，但它仍然缺少last-child。但这对你来说无关紧要，因为border-radius无论如何都不能在这些浏览器中工作。
Stack Overflow用户
发布于 2017-11-30 21:49:39
表格边框中的课程...
注意:下面的HTML/CSS代码只能在IE中查看。代码将无法在Chrome中正确呈现！
我们需要记住：
CSS表格有一个边框:它的外部边界(也可以有border-radius.)
- The单元格)单元格本身也有边框(也可以有border-radius.)
- The表格和单元格边框可以相互干扰:单元格边框可以穿透表格边框(即：
- ).To要看到这种效果，请修改下面代码中的样式规则，如下所示：
表{边框-折叠:分离；}
二、删除环绕表格角部单元格的样式规则。
三、然后玩边框间距，这样你就可以看到表格边框和单元格边框可以折叠的边框(使用: interference.
- However，-interference.
- However，：collapse;).
- When它们是折叠的，单元格和表格边框以不同的方式干涉：
i.如果表格边框是圆角的，但单元格边框仍然是方形的，则单元格的形状优先，表格将失去其弯曲的corners.ii。相反，如果角单元格是弯曲的，但表格边界是方形的，那么您将看到一个丑陋的正方形角点，它与角点单元格的曲率相邻。
- 考虑到单元格的属性优先，那么绕过表格的四个角的方法是:i.折叠表格上的边框(使用：
-
- ：collapse;).ii。在表格的角单元格上设置所需的曲率。
三、如果桌子的边角是四舍五入的，这并不重要(例如:它的边框半径可以是零)。
.zui-table-rounded {
border: 2px solid blue;
/*border-radius: 20px;*/
border-collapse: collapse;
border-spacing: 0px;
}
.zui-table-rounded thead th:first-child {
border-radius: 30px 0 0 0;
}
.zui-table-rounded thead th:last-child {
border-radius: 0 10px 0 0;
}
.zui-table-rounded tbody tr:last-child td:first-child {
border-radius: 0 0 0 10px;
}
.zui-table-rounded tbody tr:last-child td:last-child {
border-radius: 0 0 10px 0;
}
.zui-table-rounded thead th {
background-color: #CFAD70;
}
.zui-table-rounded tbody td {
border-top: solid 1px #957030;
background-color: #EED592;
} <table class="zui-table-rounded">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Height</th>
<th>Born</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>DeMarcus Cousins</td>
<td>C</td>
<td>6'11"</td>
<td>08-13-1990</td>
<td>$4,917,000</td>
</tr>
<tr>
<td>Isaiah Thomas</td>
<td>PG</td>
<td>5'9"</td>
<td>02-07-1989</td>
<td>$473,604</td>
</tr>
<tr>
<td>Ben McLemore</td>
<td>SG</td>
<td>6'5"</td>
<td>02-11-1993</td>
<td>$2,895,960</td>
</tr>
<tr>
<td>Marcus Thornton</td>
<td>SG</td>
<td>6'4"</td>
<td>05-05-1987</td>
<td>$7,000,000</td>
</tr>
<tr>
<td>Jason Thompson</td>
<td>PF</td>
<td>6'11"</td>
<td>06-21-1986</td>
<td>$3,001,000</td>
</tr>
</tbody>
</table>
Stack Overflow用户
发布于 2010-02-05 19:02:07
我让它在没有表的情况下工作，使用div，使用：
display: table-cell;
vertical-align: middle;页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/2198512
复制相关文章
相似问题
腾讯云开发者
