如何使用css正確格式化表格

我希望我的表格的外邊框是虛線，而內邊框是固定的。所以我爲我的normal-table製作了這些css代碼，但是整個表格邊界都很牢固。如何使用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>

來源

2017-06-01 user253938

是否有可能增加您的相關HTML代碼以及好嗎？ –

@kevinb。完 – user253938

這是做的一個方式，你想要什麼：

基本上喲您將left and top添加到所有<td>標籤中，並且將邊框從桌子兩側刪除，並使用<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>

來源

2017-06-01 08:18:27 Chiller

-1

可以使用的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>

來源

2017-06-01 08:17:59 Gerard

1化妝用的border-collpase:collapse，這個造型一部分table, tbody, tr和這樣collapse的table 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>

來源

2017-06-01 08:25:39 frnt

如何使用css正確格式化表格

回答

相關問題