文章/答案/技术大牛

发布

社区首页 >问答首页 >圆角仅适用于CSS

问圆角仅适用于CSS
EN

Stack Overflow用户

提问于 2011-02-08 18:58:03

回答 20查看 317.1K关注 0票数 109

我已经找了又找，但还没能找到我的需求的解决方案。

我有一个普通的旧HTML表。我希望它的圆角，没有使用图像或JS的，即纯CSS只有。如下所示：

角单元格为圆角，单元格为1px粗边框。

到目前为止，我有这样的想法：

table {
  -moz-border-radius: 5px !important;
  border-collapse: collapse !important;
  border: none !important;
}
table th,
table td {
  border: none !important
}
table th:first-child {
  -moz-border-radius: 5px 0 0 0 !important;
}
table th:last-child {
  -moz-border-radius: 0 5px 0 0 !important;
}
table tr:last-child td:first-child {
  -moz-border-radius: 0 0 0 5px !important;
}
table tr:last-child td:last-child {
  -moz-border-radius: 0 0 5px 0 !important;
}
table tr:hover td {
  background-color: #ddd !important
}

但这让我没有任何细胞的边界。如果我添加边框，它们不是圆角的！

有什么解决方案吗？

html

css

html-table

rounded-corners

Stack Overflow用户

发布于 2017-11-29 02:22:27

表格边框中的课程...

注意:下面的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>

票数 -1

查看全部 20 条回答

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/4932181

复制

相似问题

问圆角仅适用于CSS
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问圆角仅适用于CSSEN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问圆角仅适用于CSS
EN