Espacement entre les cellules les plus à gauche et les plus à droite et la bordure de la table

Question

Je crée une table en HTML et je ne veux pas que les bordures des cellules les plus à gauche et à droite s'étendent jusqu'au bord de la table. Par exemple:

| _ ___ |

Comme dans l'exemple ci-dessus, alors que les cellules elles-mêmes ont une bordure supérieure contiguë, cette bordure ne s'étend pas jusqu'au bord de la table externe. Ce serait génial si vous pouvez me donner quelques conseils sur la façon de le faire.

Answer 1

Mettez une DIV dans la cellule et le style de la bordure/rembourrage sur le DIV au lieu de la table.

Answer 2

Je ne suis pas sûr de savoir lequel de ces exemples est ce que vous voulez. Votre description semblait être le contraire de votre dessin, mais essayez-les.

<div style="width:250px;padding:10px; border-left: solid black 1px;border-right: solid black 1px;"> 
<table width="100%" style="border-top: solid black 1px;border-bottom: solid black 1px;"> 
    <tr> 
     <td>cell 1:1</td> 
     <td>cell 1:2</td> 
     <td>cell 1:3</td> 
    <tr> 
    <tr> 
     <td>cell 2:1</td> 
     <td>cell 2:2</td> 
     <td>cell 2:3</td> 
    <tr> 
</table> 
</div> 
<br /><br /> 
<div style="width:250px;padding:10px; border-top: solid black 1px;border-bottom: solid black 1px;"> 
<table width="100%" style="border-left: solid black 1px;border-right: solid black 1px;"> 
    <tr> 
     <td>cell 1:1</td> 
     <td>cell 1:2</td> 
     <td>cell 1:3</td> 
    <tr> 
    <tr> 
     <td>cell 2:1</td> 
     <td>cell 2:2</td> 
     <td>cell 2:3</td> 
    <tr> 
</table> 
</div>