Wie formatiere ich richtig Tabellen mit CSS

Question

Ich möchte die äußeren Grenzen meiner Tabelle gestrichelt sein, während die inneren Grenzen fest sind. Also habe ich diese css-Codes für meine normal-table gemacht, aber die ganze Tabelle Grenze ist solide.

.zulu-post .zulu-content .normal-table{ 
 
    color: #444444; 
 
    border: 1px dashed #444444; 
 
} 
 

 
.zulu-post .zulu-content .normal-table td, .normal-table tr{ 
 
    padding: 10px; 
 
    border: 1px solid #444444; 
 
}

<table border="1" cellpadding="1" cellspacing="1" class="normal-table" style="width:500px;"> 
 
    <tbody> 
 
     <tr> 
 
      <td>Table Name</td> 
 
     </tr> 
 
     <tr> 
 
      <td>Make sure that Stylesheet Classes is normal-table</td> 
 
     </tr> 
 
     <tr> 
 
      <td>Text Here...</td> 
 
     </tr> 
 
    </tbody> 
 
</table>

Answer 1

Dies ist eine Möglichkeit zu tun, was Sie wollen:

Grundsätzlich yo Fügen Sie den Rahmen zu allen <td> Tags hinzu, und entfernen Sie dann den Rahmen von den Seiten der Tabelle, und verwenden Sie den gestrichelten Rahmen unter <table>.

.normal-table { 
 
    color: #444444; 
 
    border: 1px dashed #444444; 
 
} 
 

 
.normal-table td { 
 
    padding: 10px; 
 
    border-left: 1px solid #444444; 
 
    border-top: 1px solid #444444; 
 
} 
 

 
.normal-table td:first-child { 
 
    border-left: none; 
 
} 
 

 
.normal-table tr:first-child td { 
 
    border-top: none; 
 
}

<table cellpadding="1" cellspacing="0" class="normal-table" style="width:500px;"> 
 
    <tbody> 
 
     <tr> 
 
      <td>Table Name</td> 
 
     </tr> 
 
     <tr> 
 
      <td>Make sure that Stylesheet Classes is normal-table</td> 
 
     </tr> 
 
     <tr> 
 
      <td>Text Here...</td> 
 
     </tr> 
 
    </tbody> 
 
</table>

Answer 2

Sie divs als Alternative verwenden:

.container { 
 
    width: 100%; 
 
    border: medium dashed darkgray; 
 
    display: table; 
 
} 
 
.cell { 
 
    width: 30%; 
 
    border: thin solid red; 
 
    height: 50px; 
 
    display: table-cell; 
 
}

<div class='container'> 
 
<div class='cell'></div> 
 
<div class='cell'></div> 
 
<div class='cell'></div> 
 
</div>

Answer 3

1. nutzen border-collpase:collapse, diese collapse die table border-single Grenze für table, tbody, tr und so dann Styling Teil tun.

.normal-table { 
 
    border: 2px solid red; 
 
    border-collapse: collapse; 
 
} 
 

 
tr { 
 
    border: 2px dashed red; 
 
}

<table border="1" cellpadding="1" cellspacing="1" class="normal-table" style="width:500px;"> 
 
    <tbody> 
 
    <tr> 
 
     <td>Table Name</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Make sure that Stylesheet Classes is normal-table</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Text Here...</td> 
 
    </tr> 
 
    </tbody> 
 
</table>