gpt4 book ai didi

html - 表格上的 CSS 圆 Angular 边框

转载 作者:太空宇宙 更新时间:2023-11-04 12:40:52 25 4
gpt4 key购买 nike

我正在尝试在具有各种子元素的表格上获得圆 Angular ,如在这个 bin 中:http://jsbin.com/seqisa/1/

我可以使阴影背景具有圆 Angular ,但我所做的似乎没有影响边界线。我已经阅读了其他几个似乎在问 smae 问题的问题,但所提供的答案似乎都不适合我。

这就是我现在得到的。 caption 元素表现良好,但 theadtbodytfoot 都不起作用。我已经尝试在每个元素上分别设置 border,但没有一个会导致圆 Angular 。

Current output

这是 html:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<table>
<tbody>
<tr><td>Cell 1</td><td>Cell 2</td></tr>
<tr><td>Cell 1</td><td>Cell 2</td></tr>
</tbody>
</table>

<table>
<thead>
<tr>
<th>Heading 1</th>
<th>Heading 2</th>
</tr>
</thead>
<tbody>
<tr><td>Cell 1</td><td>Cell 2</td></tr>
<tr><td>Cell 1</td><td>Cell 2</td></tr>
</tbody>
</table>

<table>
<caption>Caption</caption>
<tbody>
<tr><td>Cell 1</td><td>Cell 2</td></tr>
<tr><td>Cell 1</td><td>Cell 2</td></tr>
</tbody>
</table>

<table>
<caption>Caption</caption>
<thead>
<tr>
<th>Heading 1</th>
<th>Heading 2</th>
</tr>
</thead>
<tbody>
<tr>
<tr><td>Cell 1</td><td>Cell 2</td></tr>
<tr><td>Cell 1</td><td>Cell 2</td></tr>
</tr>
</tbody>
<tfoot>
<tr>
<th>Footer 1</th>
<td>Footer 2</td>
</tr>
</tfoot>

</table>

</body>
</html>

还有 CSS:

/* Basic styling */
table {
margin-bottom: 15px;
border-collapse: collapse;
}
caption { background-color: green; }
thead { background-color: blue; }
tbody { background-color: lightgray; }
tfoot { background-color: magenta; }
th, td, caption { padding: 4px; }

/* Radius */
table > :first-child,
table > :first-child > tr:first-child > td:first-child,
table > :first-child > tr:first-child > th:first-child {
border-top-left-radius: 10px;
}

table > :first-child,
table > :first-child > tr:first-child > td:last-child,
table > :first-child > tr:first-child > th:last-child {
border-top-right-radius: 10px;
}

table > :last-child,
table > :last-child > tr:last-child > td:first-child,
table > :last-child > tr:last-child > th:first-child {
border-bottom-left-radius: 10px;
}

table > :last-child,
table > :last-child > tr:last-child > td:last-child,
table > :last-child > tr:last-child > th:last-child {
border-bottom-right-radius: 10px;
}

/* Borders */

table > * {
border: 2px solid darkred;
}

最佳答案

尝试使用这个CSS

* { border-collapse: separate; }

border-radius 将无法与 border-collapse: collapse; 配合使用,因为 W3C.org 规范。

关于html - 表格上的 CSS 圆 Angular 边框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26887853/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com