Supprimer la frontière en provenance de la cellule de tableau

J'ai une table dont la structure est générée dynamiquement. Il est difficile de style à la table de la table.

J'ai ajouté de la frontière en haut et à droite à la table, ce dont j'ai besoin est de supprimer ou de les manipuler avec la couleur de la bordure pour le premier et le dernier td de la table.

Si vous pouvez voir mon violon, j'ai besoin de mettre la couleur orange de table avec contour de couleur gris. Dans le même temps, la bordure de 1px à la td doit rester le même.

Si j'ai essayer de donner à la bordure supérieure de la cellule et bordure blanche est en train de s'effondrer.

CSS:

.table_main {
    border-top: 3px solid #d6d6d6 !important; 
    border-right: 3px solid #d6d6d6 !important; 
}

.table_main td {
    background: #ff9d26;
    border-right: solid 1px #fff;
    border-bottom: 1px solid #fff;
    padding: 1px;
    text-align: center;
    width: 100px
}

.left {
    background: #fff !important;
    border-right: 3px solid #d6d6d6 !important; 
    border-bottom: 0 !important
}

.noborder {
    background: #fff !important;
}

.bottom{
    background: #fff !important;
    border-top: 3px solid #d6d6d6 !important; 
}

.top{
    border-top: 1px solid #fff  
}

Veuillez vérifier les DÉMO ici

P. S - je ne veux pas changer la structure du html car il est généré automatiquement code de la table. Et pas de pseudo classes car il n'est pas pris en charge dans IE8 et ci-dessous. J'ai besoin de cela pour être bon dans IE7+

OriginalL'auteur Sowmya | 2013-12-20

DÉMO

modifier vos classes CSS comme ceci:

<table class="table_main" width="400" align="center" border="0" cellspacing="0" cellpadding="0">
    <tr class="top">
        <td class="left">x</td>
        <td>vb</td>
        <td>X</td>
        <td class="right">g</td>
    </tr>
    <tr>
        <td class="left">2</td>
        <td>z</td>
        <td>x</td>
        <td class="right">x</td>
    </tr>
    <tr>
        <td class="left">3</td>
        <td>v</td>
        <td>v</td>
        <td class="right">d</td>
    </tr>
    <tr class="bottom">
        <td class="left">4</td>
        <td>r</td>
        <td>r</td>
        <td class="right">x</td>
    </tr>
</table>

et utiliser ce CSS:

.table_main {
}

.table_main td {
    background: #ff9d26;
    border-right: solid 1px #fff;
    border-bottom: 1px solid #fff;
    padding: 1px;
    text-align: center;
    width: 100px
}

.left, .bottom td {
    background: #fff !important;
}

.right, .left {
    border-right: 3px solid #d6d6d6 !important; 
}

.top td {
    border-top :3px solid #d6d6d6; 
}

.bottom td {
    border-top: 3px solid #d6d6d6;
}

.bottom .left {
    border-top: none;
    border-right: none !important
}

.top .left {
    border-top: none;
}

.bottom .right {
    border-right: none !important;
}

Désolé j'ai oublié de mentionner.. je ne peux pas utiliser la pseudo-classe, puisqu'elle n'est largement pris en charge par les versions IE
J'ai besoin de cette structure pour être pris en charge par IE7+, donc..
Oui, je peux ajouter des classes
sur la première ligne en haut bordure blanche est manquant. J'en ai besoin aussi, car il est dans ma démo
je pense qu'il est préférable de vous oublier 🙂

OriginalL'auteur Mohsen Safari

Ajouter

position:relative; top:-3px; padding-top:3px; /* to adjust the nudge */

à la classe .left

position:relative; right:-3px; padding-right:3px; /* to adjust the nudge */

À la classe .bottom

Cela devrait fonctionner dans IE7.

OriginalL'auteur Suraj Naik

Essayez ceci:

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <table class="table_main" width="400" align="center" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td class="left">how to remove top border from this cell?</td>
    <td class="top">vb</td>
    <td class="top">X</td>
    <td class="topRightCorner">g</td>
  </tr>
  <tr>
    <td class="left">2</td>
    <td>z</td>
    <td>x</td>
    <td class="right">x</td>
  </tr>
  <tr>
    <td class="left">3</td>
    <td>v</td>
    <td>v</td>
    <td class="right">d</td>
  </tr>
  <tr>
    <td class="noborder">4</td>
    <td class="bottom">r</td>
    <td class="bottom">r</td>
    <td class="bottom">how to remove right border from this cell?</td>
  </tr>
</table>

</body>
</html>

et avec ce CSS:

.table_main{

}
.table_main td{
    background:#ff9d26;
    border-right:solid 1px #fff;
    border-bottom:1px solid #fff;
    padding:1px;
    text-align:center;
    width:100px
}
.left{
    background:#fff !important;
    border-right:3px solid #d6d6d6 !important; 
    border-bottom:0 !important
}
.noborder{
    background:#fff !important;
}
.bottom{
    background:#fff !important;
    border-top:3px solid #d6d6d6 !important; 
}
.top{
    border-top:3px solid #d6d6d6 !important; 
}
.right{
  border-right:3px solid #d6d6d6 !important; 
}
.topRightCorner{
  border-top:3px solid #d6d6d6 !important;
  border-right:3px solid #d6d6d6 !important; 
}

OriginalL'auteur Leo Zhao

Vous pouvez combiner les solutions fournies par Morpheus et Suraj Naik.

IE 8 prend en charge les premier enfant, mais il ne supporte pas la dernière-enfant, de sorte que vous pouvez remplacer

table > tbody > tr:last-child > td:last-child

avec

tr+tr+tr+tr td+td+td+td.bottom {

pour atteindre la dernière cellule.

Pour IE7, vous pouvez ajouter le code fourni par Suraj Naik dans les commentaires conditionnels:

<!--[if lt IE 8]>
...
<![endif]-->

Vous pouvez trouver plein CSS ci-dessous:

<style>
.table_main{
        border-top:3px solid #d6d6d6 !important; 
        border-right:3px solid #d6d6d6 !important;
}
.table_main td{
    background:#ff9d26;
    border-right:solid 1px #fff;
    border-bottom:1px solid #fff;
    padding:1px;
    text-align:center;
    width:100px
}
.left{
    background:#fff !important;
    border-right:3px solid #d6d6d6 !important; 
    border-bottom:0 !important;
}
.noborder{
    background:#fff !important;
}
.bottom{
    background:#fff !important;
    border-top:3px solid #d6d6d6 !important;
}
.top{
    border-top:1px solid #fff;
}
table > tbody > tr:first-child > td:first-child
{
  margin-top: -3px;
  float: left;
}

tr+tr+tr+tr td+td+td+td.bottom {
  margin-right: -3px;
  float: right;
  padding-left: 4px;
}
</style>
<!--[if lt IE 8]>
<style>
.left{
    position:relative; top:-3px; padding-top:3px; /* to adjust the nudge */
}
.bottom{
    position:relative; right:-3px; padding-right:3px; /* to adjust the nudge */
}
</style>
<![endif]-->

OriginalL'auteur mali303

CSS :

.table_main{
}
.table_main td{
    background:#ff9d26;
    border-right:solid 1px #fff;
    border-bottom:1px solid #fff;
    padding:1px;
    text-align:center;
    width:100px
}
.left, .bottom td{
    background:#fff !important;
}
.right, .left{
  border-right:3px solid #d6d6d6 !important; 
}
.top td{
  border-top:3px solid #d6d6d6; 
}
.bottom td{
  border-top:3px solid #d6d6d6;
}
.bottom .left{
  border-top:none;
  border-right:none !important
}
.top .left{
  border-top:none;
}
.bottom .right{
  border-right:none !important;
}

OriginalL'auteur Java Curious ღ

0

Première démo (j'ai testé cela dans IE7,8,9,10 ainsi que le dernier Chrome et Firefox):

http://jsbin.com/ImEvAGoJ/5

J'ai utilisé une combinaison de border et box-shadow pour atteindre le double effet de bordure. Bien sûr box-shadow n'est pas pris en charge dans IE8 et inférieurs, donc j'ai dû utiliser l'équivalent DropShadow filtre (plus d'infos). Exemple:
```
.table_main .top.right {
  box-shadow: 1px 0 white, 4px 0 #d6d6d6, 
              0 -1px white, 0 -4px #d6d6d6,
              1px -1px white, 4px -4px #d6d6d6;
  filter: progid:DXImageTransform.Microsoft.dropshadow(OffX=0, OffY=-1, Color='#00ffffff', Positive='true'),
          progid:DXImageTransform.Microsoft.dropshadow(OffX=0, OffY=1, Color='#00ffffff', Positive='true'),
          progid:DXImageTransform.Microsoft.dropshadow(OffX=-1, OffY=0, Color='#00ffffff', Positive='true'),
          progid:DXImageTransform.Microsoft.dropshadow(OffX=1, OffY=0, Color='#00ffffff', Positive='true'),
          progid:DXImageTransform.Microsoft.dropshadow(OffX=0, OffY=-3, Color='#00d6d6d6', Positive='true'),
          progid:DXImageTransform.Microsoft.dropshadow(OffX=3, OffY=0, Color='#00d6d6d6', Positive='true');
}
```
Noter que le gris box-shadow est 4px large parce qu'elle chevauche la 1px ombre blanche.

Aussi, cela suppose que vous pouvez modifier les classes de votre table qui, je pense, vous l'avez dit vous pouvez le faire dans un de vos commentaires ci-dessus.

Fondamentalement, l'utilisation outside classe pour toutes les cellules qui sont à côté de votre bordure grise, top, left, bottom, right classes pour la rangée du haut, colonne de gauche, rangée du bas, de droite et de colonnes de cellules, respectivement. Votre code devrait ressembler à ceci:
```
<table class="table_main" width="400" align="center" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td class="outside">how to remove top border from this cell?</td>
    <td class="top left">vb</td>
    <td class="top">X</td>
    <td class="top right">g</td>
  </tr>
  <tr>
    <td class="outside">2</td>
    <td class="left">z</td>
    <td>x</td>
    <td class="right">x</td>
  </tr>
  <tr>
    <td class="outside">3</td>
    <td class="left bottom">v</td>
    <td class="bottom">v</td>
    <td class="bottom right">d</td>
  </tr>
  <tr>
    <td class="outside">4</td>
    <td class="outside">r</td>
    <td class="outside">r</td>
    <td class="outside">how to remove right border from this cell?</td>
  </tr>
</table>
```
Mise à jour: voici des captures d'écran de IE7 sous Vista, IE8 sur windows xp et IE8 sur Win7:

Ce n'est pas la prise de gris frontières dans ie7 et 8
c'est étrange. Je viens d'ajouter les captures d'écran pour IE7 et 8. Quel navigateur/OS versions êtes-vous tester?
windows 7.......
Pourriez-vous m'en dire plus? si je peux aider 🙂 Ce pourrait être le seul moyen de résoudre votre problème avec les besoins que vous avez, et il devrait ou ne travaillent dans IE7,8. Êtes-vous à l'aide de IE modes de compatibilité? ou avez-vous plusieurs versions sur IE installé sur la même version de windows? De toute façon, j'avais envisager de tester sur des machines avec une seule complète/version de navigateur per OS (par opposition à quelque chose comme multipleIE).
J'ai ajouté une capture d'écran à partir de IE8 sur Windows 7. Comme vous pouvez le voir, le gris, les frontières sont là. Pour IE test, je recommande l'utilisation de la libre VMs fournis sur moderne.ie/en-us/virtualisation-les outils#téléchargements.

OriginalL'auteur myajouri
0

Si vous pouvez modifier le td classes plus supprimer la bordure de style de la table {} et d'appliquer un nom de classe pour les éléments que vous souhaitez recevoir de la bordure grise.
```
td.top { border-top: 3px solid #D6D6D6; } 
```
Puis ajouter une autre classe pour la partie droite de la bordure style:
```
td.rightBorder { border-right: 3px solid #D6D6D6; } 
```
Assurez-vous d'ajouter les deux noms de classe à la cellule qui contient le 'g'.

OriginalL'auteur Roleat

Vous devez vous connecter pour publier un commentaire.