Débarrassez-vous de la bordure horizontale dans une table en utilisant CSS

Question

Je veux me débarrasser de la ligne horizontale au milieu. Fondamentalement, je veux que la table ait les frontières extérieures et un diviseur vertical au milieu. Comment puis-je y parvenir?

JS Fiddle - https://jsfiddle.net/kac69ovn/

table { 
 
    width: 85%; 
 
    border-collapse: collapse; 
 
    margin-left: 4%; 
 
    border: 1px solid black; 
 
} 
 

 
th { 
 
    text-align: left; 
 
    width: 50%; 
 
    border: 1px solid black; 
 
    padding: 5px 11px; 
 
} 
 

 
td { 
 
    text-align: left; 
 
    width: 50%; 
 
    border: 1px solid black; 
 
    padding: 5px 11px; 
 
}

<table> 
 
    <tbody> 
 
    <tr> 
 
     <th>Firstname</th> 
 
     <th>Lastname</th> 
 
    </tr> 
 
    <tr> 
 
     <td>Lorem Ipsum is simply dummy text of the printing and </td> 
 
     <td>It is a long established fact that a </td> 
 
    </tr> 
 
    </tbody> 
 
</table>

Merci à l'avance!

Answer 1

Vous pouvez jouer avec les frontières:

1. Set border-top: none pour le td s

2. Set border-bottom: none pour la th

3. Ajouter ceci pour empêcher la ligne horizontale quand il y a plusieurs tr s:

   tr:not(:last-child) td { 
   border-bottom: none; 
   } 
   

Voir la démo ci-dessous:

table { 
 
    width: 85%; 
 
    border-collapse: collapse; 
 
    margin-left: 4%; 
 
    /*border: 1px solid black;*/ 
 
} 
 

 
th { 
 
    text-align: left; 
 
    width: 50%; 
 
    border: 1px solid black; 
 
    border-bottom: none; /* ADDED */ 
 
    padding: 5px 11px; 
 
} 
 

 
td { 
 
    text-align: left; 
 
    width: 50%; 
 
    border: 1px solid black; 
 
    border-top: none; /* ADDED */ 
 
    padding: 5px 11px; 
 
} 
 

 
tr:not(:last-child) td { /* ADDED */ 
 
    border-bottom: none; 
 
}

<table> 
 
    <tbody> 
 
    <tr> 
 
     <th>Firstname</th> 
 
     <th>Lastname</th> 
 
    </tr> 
 
    <tr> 
 
     <td>Lorem Ipsum is simply dummy text of the printing and </td> 
 
     <td>It is a long established fact that a </td> 
 
    </tr> 
 
    <tr> 
 
     <td>Lorem Ipsum is simply dummy text of the printing and </td> 
 
     <td>It is a long established fact that a </td> 
 
    </tr> 
 
    </tbody> 
 
</table>

Answer 2

th, td {border: none; border-right: 1px solid black;} 

Answer 3

Je pense que c'est ce que vous cherchez:

table { 
    width: 85%; 
    border-collapse: collapse; 
    margin-left: 4%; 
    border: 1px solid black; 
} 
th { 
    text-align: left; 
    width: 50%; 
    border: 1px solid black; 
    padding: 5px 11px; 
    border-bottom: None; 
} 
td { 
    text-align: left; 
    width: 50%; 
    border: 1px solid black; 
    padding: 5px 11px; 
    border-top: None; 
} 

Answer 4

mis à jour

https://jsfiddle.net/kac69ovn/1/

table { 
    width: 85%; 
    border-collapse: collapse; 
    margin-left: 4%; 
    border: 1px solid black; 
} 
th { 
    text-align: left; 
    width: 50%; 
    border-right: 1px solid black; 
    padding: 5px 11px; 
} 
td { 
    text-align: left; 
    width: 50%; 
    border-right: 1px solid black; 
    padding: 5px 11px; 
} 

Answer 5

Gardez la frontière complète sur votre table, mais le bâton à border-left et border-right pour votre th et td éléments.

table { 
 
    width: 85%; 
 
    border-collapse: collapse; 
 
    margin-left: 4%; 
 
    border: 1px solid black; 
 
} 
 
th, td { 
 
    text-align: left; 
 
    width: 50%; 
 
    border-right: 1px solid black; 
 
    border-left: 1px solid black; 
 
    padding: 5px 11px; 
 
}

<table> 
 
     <tbody> 
 
      <tr> 
 
      <th>Firstname</th> 
 
      <th>Lastname</th> 
 
      </tr> 
 
      <tr> 
 
      <td>Lorem Ipsum is simply dummy text of the printing and </td> 
 
      <td>It is a long established fact that a </td> 
 
      </tr> 
 
     </tbody> 
 
    </table>