gpt4 book ai didi

表格样式中的 HTML/CSS 表格

转载 作者:太空宇宙 更新时间:2023-11-03 20:25:26 24 4
gpt4 key购买 nike

我在另一个表格的最后一行的最后一个单元格中有一个表格。样式应带有圆 Angular 。

“外部”表格看起来不错,但“内部”表格的每一行都有圆 Angular 单元格 - 是因为它位于最后一个“外部”表格行吗?如何将样式与其他表分开?

Example Picture

代码如下:

		body {
margin: 30px;
}

table {
border-collapse: separate;
border-spacing: 0;
min-width: 350px;
}

table tr th,
table tr td {
border-right: 1px solid #bbb;
border-bottom: 1px solid #bbb;
padding: 5px;
}

table tr th:first-child,
table tr td:first-child {
border-left: 1px solid #bbb;
}

table tr th {
background: #eee;
border-top: 1px solid #bbb;
text-align: left;
}

/* top-left border-radius */
table tr:first-child th:first-child {
border-top-left-radius: 6px;
}

/* top-right border-radius */
table tr:first-child th:last-child {
border-top-right-radius: 6px;
}

/* bottom-left border-radius */
table tr:last-child td:first-child {
border-bottom-left-radius: 6px;
}

/* bottom-right border-radius */
table tr:last-child td:last-child {
border-bottom-right-radius: 6px;
}
	<table>
<tr>
<th>Ü1</th>
<th>Ü2</th>
<th>Ü3</th>
<th>Ü4</th>
</tr>
<tr>
<td>11</td>
<td>
<table>
<tr>
<th>Ü1</th>
<th>Ü2</th>
<th>Ü3</th>
<th>Ü4</th>
</tr>
<tr>
<td>item1</td>
<td>item2</td>
<td>item1</td>
<td>item2</td>
</tr>
<tr>
<td>item1</td>
<td>item2</td>
<td>item1</td>
<td>item2</td>
</tr>
</table>
</td>
<td>13</td>
<td>14</td>
</tr>
<tr>
<td>21</td>
<td>22</td>
<td>
<table>
<tr>
<th>Ü1</th>
<th>Ü2</th>
<th>Ü3</th>
<th>Ü4</th>
</tr>
<tr>
<td>item1</td>
<td>item2</td>
<td>item1</td>
<td>item2</td>
</tr>
<tr>
<td>item1</td>
<td>item2</td>
<td>item1</td>
<td>item2</td>
</tr>
</table>
</td>
<td>24</td>
</tr>
<tr>
<td>31</td>
<td>32</td>
<td>33</td>
<td>
<table>
<tr>
<th>reset</th>
<th>item2</th>
<th>item1</th>
<th>item2</th>
</tr>
<tr>
<td>item1</td>
<td>item2</td>
<td>item1</td>
<td>item2</td>
</tr>
<tr>
<td>item1</td>
<td>item2</td>
<td>item1</td>
<td>item2</td>
</tr>
<tr>
<td>item1</td>
<td>item2</td>
<td>item1</td>
<td>item2</td>
</tr>
</table>
</td>
</tr>
</table>

最佳答案

试试这个代码。它可能会解决你的问题:)

<html>
<head>
<style>
body {
margin: 30px;
}

table {
border-collapse: separate;
border-spacing: 0;
min-width: 350px;
}

table tr th,
table tr td {
border-right: 1px solid #bbb;
border-bottom: 1px solid #bbb;
padding: 5px;
}

table tr th:first-child,
table tr td:first-child {
border-left: 1px solid #bbb;
}

table tr th {
background: #eee;
border-top: 1px solid #bbb;
text-align: left;
}

/* top-left border-radius */
table tr:first-child th:first-child {
border-top-left-radius: 6px;
}

/* top-right border-radius */
table tr:first-child th:last-child {
border-top-right-radius: 6px;
}

/* bottom-left border-radius */
table table tr:last-child td:first-child {
border-bottom-left-radius: 6px;
}

/* bottom-right border-radius */
table table tr:last-child td:last-child {
border-bottom-right-radius: 6px;
}
</style>

<meta charset="utf-8">
<title>Test</title>
</head>

<body>
<table>
<tr>
<th>Ü1</th>
<th>Ü2</th>
<th>Ü3</th>
<th>Ü4</th>
</tr>
<tr>
<td>11</td>
<td>
<table>
<tr>
<th>Ü1</th>
<th>Ü2</th>
<th>Ü3</th>
<th>Ü4</th>
</tr>
<tr>
<td>item1</td>
<td>item2</td>
<td>item1</td>
<td>item2</td>
</tr>
<tr>
<td>item1</td>
<td>item2</td>
<td>item1</td>
<td>item2</td>
</tr>
</table>
</td>
<td>13</td>
<td>14</td>
</tr>
<tr>
<td>21</td>
<td>22</td>
<td>
<table>
<tr>
<th>Ü1</th>
<th>Ü2</th>
<th>Ü3</th>
<th>Ü4</th>
</tr>
<tr>
<td>item1</td>
<td>item2</td>
<td>item1</td>
<td>item2</td>
</tr>
<tr>
<td>item1</td>
<td>item2</td>
<td>item1</td>
<td>item2</td>
</tr>
</table>
</td>
<td>24</td>
</tr>
<tr>
<td>31</td>
<td>32</td>
<td>33</td>
<td>
<table>
<tr>
<th>reset</th>
<th>item2</th>
<th>item1</th>
<th>item2</th>
</tr>
<tr>
<td>item1</td>
<td>item2</td>
<td>item1</td>
<td>item2</td>
</tr>
<tr>
<td>item1</td>
<td>item2</td>
<td>item1</td>
<td>item2</td>
</tr>
<tr>
<td>item1</td>
<td>item2</td>
<td>item1</td>
<td>item2</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>

关于表格样式中的 HTML/CSS 表格,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56442717/

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