我正在尝试在HTML/CSS中圆掉表格的外角。我还没有弄清楚为什么border-radius属性不起作用。
当我检查chrome（computed section）中的元素时，我注意到元素有一个边界3（它侵占了外角）。0 ";它不起作用。我的猜测是浏览器应用了默认边框。
我很感激你的建议。
谢谢你。
* {
box-sizing: border-box;
}
h1 {
color: rgb(11, 8, 165);
text-align: center;
margin-bottom: 80px;
}
h2 {
color: rgb(5, 59, 41);
text-align: center;
}
body {
background-color: rgb(226, 220, 176);
}
.firstPara p {
text-align: center;
}
table {
border-collapse: collapse;
margin-left: auto;
margin-right: auto;
border-radius: 15px;
overflow:hidden;
perspective: 1px;
border: 0px;
}
.univeralSelector {
color: rgb(211, 21, 21);
}
table thead tr th {
background-color: rgb(11, 134, 93);
color: white;
padding: 12px 15px;
border: 3px black solid;
}
table tbody tr td {
border: black solid;
padding: 12px 15px;
font-size: 0,9rem;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/styles.css">
<title>Common CSS Properties</title>
</head>
<body>
<header><h1>Common CSS Properties</h1></header>
<h2>Different Types of Selectors</h2>
<div class="firstPara">
<p>Selectors are used to style HTML elements according to their type and/or attributes.
<br>
All markups can be selected with the universal selector: "
<span class="univeralSelector">*</span> "{
/* declarations here */
}
</p>
</div>
<table>
<thead>
<tr>
<th>Select by</th>
<th>Syntax</th>
<th>Example</th>
</tr>
</thead>
<tbody>
<tr>
<td>Type</td>
<td>element-name {
/* declarations here */}</td>
<td>
p {
text-align: center;
color: red;}</td>
</tr>
<tr>
<td>Attribute</td>
<td>'id' (in the HTML file) '#' (in CSS file)
<br>'class' (in HTML file) '.' (in CSS file)</td>
<td>#para1 {
text-align: center;
color: red;
}
<br>
.center {
text-align: center;
color: red;}</td>
</tr>
</tbody>
</table>
<h2>CSS Units</h2>
<table>
<thead>
<tr>
<th>Absolute Units</th>
<th>Relative Units</th>
</tr>
</thead>
<tb>
<td>
<ul>
<li>
em: Property size relative to property size of direct parent element (most common)
</li>
<li>
rem: Property size relative to property size of direct root element
</li>
<li>
vw: Percentage based on width of screen
</li>
<li>
vh: Percentage based on height of screen
</li>
</ul>
</td>
<td>
<ul>
<li>px: Pixels (most common)</li>
<li>pt: Points</li>
<li>mm: Millimeters</li>
</ul>
</td>
</tb>
</table>
</body>
</html>
3条答案
按热度按时间dgiusagp1#
当table标记具有“border-collapse：折叠;". try“边框折叠：分开;”
yhxst69z2#
border-collapse和border-radius有冲突，所以border-radius不工作.你可以使用
divPackagetable，然后设置边界和border-radius在divfnx2tebb3#
这里有两个问题，第一个问题是
border应用到表格单元格，而border-radius设置在表格上。border-radius不能与border-collapse: collapse;一起使用，请改用border-collapse: separate;border-spacing: 0px;。可以将带圆角的表格边框和单元格边框组合用于网格。
下面是一个工作实现：