Dev Faq
0
votes

Table HTML / CSS dans le style de tableau

J'ai une table dans la dernière cellule de la dernière rangée d'une autre table. Le style devrait être avec des coins arrondis.

La table "extérieure" a l'air bien, mais la table "intérieure" a fait des coins cellulaires arrondis dans chaque rangée - est-ce parce qu'il est dans la dernière rangée de table "extérieure"? Comment puis-je séparer le style de l'autre table? P>

exemple d'image p>

Voici le code: p>

p> 

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

2 commentaires

Le problème ici est que la table que vous avez marquée dans votre capture d'écran est elle-même dans la dernière ligne de table de son parent - donc un sélecteur comme Table TR: last-enfant TD: premier enfant < / Code> s'applique à toutes les cellules de table dans la table interne, quelle que soit la ligne de table intérieure dans laquelle ils sont.

Vous pouvez facilement résoudre ce problème en utilisant la combinaison enfant - mais vous devez ensuite basculer Table pour Tody (car les lignes de table ne sont jamais directes d'enfants de l'élément de table lui-même, mais de Soit une tête de table, un pied ou un corps - Todbody est créé implicitement, si ce n'est pas dans le HTML.) Modifiez ces quatre dernières règles pour utiliser des sélecteurs du formulaire Tbody> TR: premier enfant> TH: premier enfant , et il devrait fonctionner comme souhaité.

5 Réponses :

3
votes

Essayez ce code.Il Pourriez résoudre votre problème :)

p> 

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

0 commentaires
1
votes

Ajouter TD fort> devant la table tr: dernier enfant TD: premier enfant

p> 

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

1 commentaires

Ajoutez un "TD" devant RADIUS BORD-RADIUS BAST-GAUCHE CSS et RADIUS DE BAST-ROND

1
votes

Il suffit d'ajouter > code> pour la cible seulement premier TH code> ou TD code> résoudre votre problème. Essayez ceci, j'espère que ça va résoudre votre problème. Merci xxx pré>

p> 

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

0 commentaires
0
votes

TABLE TR: Last-Enfant TD: Le premier enfant

est le problème. P>

Le dernier enfant de votre TR a suivi CSS-Rule: P> 

border-bottom-left-radius: 6px

0 commentaires
0
votes

Merci pour vos solutions! Ils travaillent comme un charme.

Nous pensions que ce serait une solution facile: -)

0 commentaires

Articles qui pourrait vous intéresser :

Google Chrome Uncaught (promis) DOMException lors de la lecture AUDIO
Select2 ne s'affiche pas correctement dans le mode bootstrap
Le bootstrap de Twitter a-t-il des classes utilitaires de taille de police?
Comment puis-je définir un format pour les nombres d'entrée dans Blazor