Comment puis-je masquer la bordure entre ces deux cellules tout en les gardant séparées dans le code HTML (c'est-à-dire ne pas fusionner les cellules en utilisant un colspan="2" )? Le sens d'utiliser deux cellules séparées au lieu d' une cellule fusionnée est d'avoir l'attribut user-select: none uniquement pour la première cellule.
L'aspect par défaut des bordures (voir image) doit être conservé dans la mesure du possible.
<table border=1>
<tr>
<td style="user-select: none">1)</td>
<td>Javascript</td>
</tr>
</table> Le résultat attendu:
J'utilise Chrome.
3 Réponses :
Vous pouvez personnaliser le style de bordure du table . Remplacez la red et blue comme vous le souhaitez.
<table border=1>
<tr>
<td style="user-select: none">1)</td>
<td>Javascript</td>
</tr>
</table>table {
border: 1px solid red;
padding: 4px;
position: relative;
}
table:before {
border: 1px solid blue;
content: "";
display: block;
position: absolute;
top: 2px;
left: 2px;
right: 2px;
bottom: 2px;
}
td {
border: none;
}Veuillez créer un extrait.
vous voulez garder la deuxième bordure td?
Mais il a un autre design de bordure. Par exemple, l'original a une intensité de couleur différente (pas seulement le noir).
vous pouvez personnaliser le style de bordure du tableau, réponse mise à jour.
Merci pour le +1 créatif. Mais les principaux souhaitent qu'il garde les frontières d'origine. Peut-être avec des interruptions ...
que voulez-vous dire, frontière d'origine?
L'effet graphique de border=1 . Donc, sans utiliser d'autres styles de bordure css . Juste pour laisser 1 bordure (entre les cellules) être none ou totalement blanche ou transparente.
si cela ne vous dérange pas, vous pouvez modifier les valeurs de pixel pour la table et la table: avant pour avoir la même apparence que celle d'origine.
Il est intéressant si possible de copier le dessin. Vous pouvez ajouter un autre extrait.
laissez-moi savoir la couleur de la bordure extérieure et intérieure, et l'espace entre eux.
Pour copier le résultat attendu de la question. Cela rappelle un effet de dégradé.
Vous pouvez voir cette conception par défaut agrandie pour comprendre son modèle: i.imgur.com/NIP0v32.png
Pourquoi le curseur de texte n'apparaît-il pas (pour sélectionner du texte) sur "Javascript" dans votre extrait de code?
<table border=0>
<tr>
<td style="user-select: none">1)</td>
<td>Javascript</td>
</tr>
</table>td {
border: none;
}
table {
border: double;
}Vous pouvez également simplement donner border = 0 sans donner l'attribut de style Vérifiez cet extrait de code.
@oleedd pls vérifier maintenant
Mais il a un autre design de bordure. J'ai besoin de garder le design original. Par exemple, l'original a une intensité de couleur différente (pas seulement le noir).
Vous pouvez utiliser les paramètres suivants:
<table border=1>
<tr>
<td colspan="2">
<table>
<tr>
<td style="user-select: none">1)</td>
<td>Javascript</td>
</tr>
</table>
</td>
</tr>
</table>table table {
border: none;
}Version 2: Bordures par défaut - possible uniquement avec des interruptions sur les bordures intérieures:
<table border=1>
<tr>
<td style="user-select: none">1)</td>
<td>Javascript</td>
</tr>
</table>tr:first-child>td:first-child {
border-right: none;
}
tr:first-child>td:nth-child(2) {
border-left: none;
}Version 3: table imbriquée dans la cellule fusionnée:
<table border=1>
<tr>
<td style="user-select: none">1)</td>
<td>Javascript</td>
</tr>
</table>table {
border-collapse: collapse;
border: double;
}
tr:first-child>td:first-child {
border-right: none;
}
tr:first-child>td:nth-child(2) {
border-left: none;
}Mais vous utilisez un autre design de bordure. Je veux garder l'original.
Par défaut, il existe des bordures intérieure et extérieure (tableau et cellule). Si vous supprimez uniquement la partie gauche / droite des bordures de cellule, il y aura une petite interruption dans les bordures intérieures, donc ce que vous voulez n'est en fait pas possible. (Essayez de supprimer toute la règle CSS pour la table dans mon extrait de code, puis vous voyez ce que je veux dire)
> "en fait pas possible" - comme toujours (
Mais mon résultat n'est pas vraiment si différent (?)
Je peux également créer des solutions de contournement par moi-même. Mais le sens était de le faire avec une bordure html originale (sans autre style de bordure css ). Etrange que ce soit un si gros problème.
Soyons égal avec de petites interruptions. Intéressant à voir.
chaque solution sera une solution de contournement dans ce cas. Une autre serait de fusionner ces deux cellules et d'utiliser un tableau imbriqué à l'intérieur.
1) Alors pouvez-vous faire cela avec des interruptions? 2) Comment fusionner dans 1 cellule mais avec user-select: none pour "1)"?
Je viens d'ajouter un deuxième extrait à ma réponse
Cool +1. Au moins, la conception graphique est ce dont j'ai besoin. Mais pour une grande table, ce serait comme doubler la taille du code. Qu'en est-il de la variante avec interruptions?
D'accord, j'ai ajouté ça aussi
Merci. Pourquoi ne pas rendre cette bordure blanche ou transparente?
?? - retour à la réponse # 1 ;-) Vous vouliez le look par défaut ...
Je veux dire utiliser la couleur #FFFFFF pour masquer cette bordure (entre les cellules), sans appliquer de color aux autres côtés. La bordure droite fonctionne, mais la gauche devient grise au lieu de blanc - très étrange. Ou un style pour le rendre transparent (probablement pas possible).
Savez-vous pourquoi il est gris? Ou c'est blanc de votre côté?
Je suppose que cela est dû au style de bordure par défaut pour les tableaux, qui dans la plupart des navigateurs est "outset" et crée une sorte d'effet d'ombre.
Mais si aucune frontière - ne devrait être aucune ombre. On dirait un bug.
J'utiliserais ma propre solution - <span style="user-select: none"> au lieu de <td> , mais vos 3 versions sont utiles.
Voir ma nouvelle question sur les bordures: stackoverflow.com/questions/65214138