cssを使用してテーブルを適切にフォーマットする方法

Question

テーブルの外側の境界線を破線で囲んで内側の境界線を固定したい。だから私はnormal-tableのためにこれらのCSSコードを作ったが、テーブル全体の境界は固いです。

.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

これはあなたが望むものを行うための一つの方法です：基本的に

よすべての<td>タグに境界left and topを追加し、テーブルの両側から境界線を削除し、<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>

border-collpase:collapseの

Answer 2

あなたは、代替としてdivを使用することができます。

.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

第一メーク使用、table, tbody, trなどについては、この後、行うcollapsetable border国境singleにスタイリングパーツ。

.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>