表格样式中的HTML / CSS表格
我在另一个表的最后一行的最后一个单元格中有一个表。 样式应带有圆角。
“外部”表看起来不错，但是“内部”表的每一行都有圆角单元格-是因为它位于最后一个“外部”表行中吗？如何将样式与其他表格分开？
代码如下：
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>
5 个答案:
答案 0 :(得分：4)
尝试此代码。它可能会解决您的问题：）
<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>
答案 1 :(得分：1)
在表tr：last-child td：first-child
前面添加 td
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 */
td > table tr:last-child td:first-child {
border-bottom-left-radius: 6px;
}
/* bottom-right border-radius */
td > table tr:last-child td:last-child {
border-bottom-right-radius: 6px;
}<html>
<head>
<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>
答案 2 :(得分：1)
只需仅将>添加到目标th或td就可以解决您的问题。试试这个，希望它能解决您的问题。谢谢
/* 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;
}
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>
答案 3 :(得分：0)
表tr：最后一个孩子td：第一个孩子
是问题。
tr的最后一个孩子具有以下css-rule：
border-bottom-left-radius: 6px
渲染左下边界半径为6像素。
禁用该选项可以解决您的问题，但同时禁用左下边框。
答案 4 :(得分：0)
感谢您的解决方案！ 他们像魅力一样工作。
我们认为这将是一个简单的解决方案：-）
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？