Question

У меня есть таблица в последней ячейке в последнем ряду другой таблицы.Стиль должен быть с закругленными углами.

«Внешняя» таблица выглядит хорошо, но «внутренняя» таблица имеет закругленные углы ячеек в каждой строке - это потому, что она находится в последней «внешней» строке таблицы?Как я могу отделить стиль от другого стола?

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>

Arjun · Answer 1 · 04 июня 2019

Попробуйте этот код. Это может решить вашу проблему:)

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

Hassan Siddiqui · Answer 2 · 04 июня 2019

Просто добавьте > для цели только сначала 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>

Mileesh M S · Answer 3 · 04 июня 2019

Добавить 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>

uwe85 · Answer 4 · 04 июня 2019

Спасибо за ваши решения!Они работают как шарм.

Мы думали, что это будет простое решение: -)

FunnyO · Answer 5 · 04 июня 2019

таблица tr: last-child td: first-child

Это проблема.

Last-Child вашего tr имеет следующее css-правило:

border-bottom-left-radius: 6px

Визуализация левого нижнего бордюра-радиуса с 6px.

, отключив его, решит вашу проблему, но также отключит нижнюю левую границу.

HTML / CSS таблица в стиле таблицы

Пожалуйста, войдите или зарегистрируйтесь чтобы ответить на этот вопрос.

Ответы [ 5 ]

Пожалуйста, войдите или зарегистрируйтесь что бы добавить комментарий.

Пожалуйста, войдите или зарегистрируйтесь что бы добавить комментарий.

Пожалуйста, войдите или зарегистрируйтесь что бы добавить комментарий.

Пожалуйста, войдите или зарегистрируйтесь что бы добавить комментарий.

Пожалуйста, войдите или зарегистрируйтесь что бы добавить комментарий.

HTML / CSS таблица в стиле таблицы

Пожалуйста, войдите или зарегистрируйтесь чтобы ответить на этот вопрос.

Ответы [ 5 ]

Пожалуйста, войдите или зарегистрируйтесь что бы добавить комментарий.

Пожалуйста, войдите или зарегистрируйтесь что бы добавить комментарий.

Пожалуйста, войдите или зарегистрируйтесь что бы добавить комментарий.

Пожалуйста, войдите или зарегистрируйтесь что бы добавить комментарий.

Пожалуйста, войдите или зарегистрируйтесь что бы добавить комментарий.

Похожие темы