表格样式中的 HTML/CSS 表格

Posted

技术标签:

【中文标题】表格样式中的 HTML/CSS 表格【英文标题】：HTML/CSS table in table styling 【发布时间】：2019-10-19 21:57:45 【问题描述】：

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

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

代码如下：

		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>

【问题讨论】：

这里的问题是您在屏幕截图中标记的表格本身位于其父级的 last 表格行中 - 所以像 table tr:last-child td:first-child 这样的选择器适用于 所有内部表格中的最后一个表格单元格，无论它们位于哪个内部表格行中。 您可以通过使用子组合器轻松解决此问题 - 但是您必须将 table 切换为 tbody （因为表格行永远不是表格元素本身的直接子元素，而是表头、表脚或表体 - tbody 被隐式创建，如果它不在 html 中。）修改最后四个规则以使用 tbody &gt; tr:first-child &gt; th:first-child 形式的选择器，它应该可以按需要工作。 【参考方案1】：

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

<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>

【讨论】：

【参考方案2】：

在表格前添加td tr:last-child td:first-child

  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>

【讨论】：

在 bottom-left border-radius css 和 bottom-right border-radius 前面添加一个“td”【参考方案3】：

只需为目标添加&gt;，仅先添加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>

【讨论】：

【参考方案4】：

table tr:last-child td:first-child

是问题所在。

您的 tr 的 Last-Child 具有以下 css 规则：

border-bottom-left-radius: 6px

将左下边框-半径渲染为6px。

禁用它会解决您的问题，但也会禁用左下边框。

【讨论】：

【参考方案5】：

感谢您的解决方案！ 他们的工作就像一个魅力。

我们认为这将是一个简单的解决方案 :-)

【讨论】：

以上是关于表格样式中的 HTML/CSS 表格的主要内容，如果未能解决你的问题，请参考以下文章

html+css表格的边框显示是双线，怎样变成像word中的表格一样？

HTML CSS表格如何控制上下间距

在html电子邮件中对齐表格中的数据单元格元素

如何修改博客园的标题，文本，表格等的显示样式

booatrap中的表格样式

html+css grid中显示滚动条后，表格内容与表头有18px的偏移