0

I've a table in the last cell in the last row of an other table. The styling should be with rounded corners.

The "outer" table looks good, but the "inner" table has rounded cell-corners in every row - is it because it's in the last "outer" table row? How can I seperate the styling from the other table?

Example Picture

Here is the code:

		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>

Improve this question
2
  • The problem here is that the table you marked in your screenshot, is itself in the last table row of its parent - so a selector like table tr:last-child td:first-child applies to all last table cells in the inner table, regardless of what inner table row they are in. Commented Jun 4, 2019 at 11:24
  • You can easily fix this by using the child combinator - but then you have to switch table for tbody (because table rows are never direct children of the table element itself, but of either a table head, foot or body - tbody gets implicitly created, if it is not in the HTML.) Modify those last four rules to use selectors of the form tbody > tr:first-child > th:first-child, and it should work as desired. Commented Jun 4, 2019 at 11:24

5 Answers 5

Reset to default
3

Try this code.It might solve your problem :)

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

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

1

Add td in front of table 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>

Improve this answer

1 Comment

Add a "td" in front of bottom-left border-radius css and bottom-right border-radius
1

Just add > for target only first th or td will resolve your issue. Try this I hope it'll resolve your issue. Thanks

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

Improve this answer

Comments

0

table tr:last-child td:first-child

Is the Problem.

The Last-Child of your tr has following css-rule:

border-bottom-left-radius: 6px

Rendering the leftbottom border-Radius to have 6px.

disabling that, will solve your Problem, but also disable the bottom-left border.

Improve this answer

Comments

0

Thanks for your solutions! They are working like a charm.

We thought it would be an easy solution :-)

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.