使用CSS/HTML的單元格表格間距

Question

我真的很新，HTML/CSS但我需要使用這兩種語言才能實現我的Django Web應用程序。

我的<table>出現問題，因爲單元格間距不考慮我的css文件。

.navbar { 
 
    background-color: #0083A2; 
 
} 
 
.nav navbar-brand { 
 
    color: #FFFFFF; 
 
} 
 
.active { 
 
    background-color: #454545; 
 
} 
 
h1, 
 
h2, 
 
h4 { 
 
    color: #0083A2; 
 
} 
 
.button { 
 
    display: inline; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    border-radius: 8px; 
 
    font-size: 16px; 
 
    border: 2px solid #000000; 
 
    background-color: #e8e8e8; 
 
    -webkit-transition-duration: 0.2s; 
 
    transition-duration: 0.2s; 
 
} 
 
.form-fields { 
 
    border-radius: 8px; 
 
    margin-right: auto; 
 
} 
 
.col-sm-6 { 
 
    display: inline-block; 
 
    margin-left: 10px; 
 
    width: 30%; 
 
    list-style: None; 
 
} 
 
.col-sm-8 { 
 
    list-style: initial; 
 
} 
 
.col-sm-10 { 
 
    display: inline-block; 
 
    margin-left: 10px; 
 
    width: 800%; 
 
    list-style: None; 
 
} 
 
.button:hover { 
 
    background-color: #0083A2; 
 
    color: #454545; 
 
} 
 
table { 
 
    border-spacing: 100px; 
 
}

<div class="col-sm-8"> 
 
    <h4><b><font color="#0083A2"> Récapitulatif des 3 dernières fiches individuelles créées: </b></font></h4> 
 
    <table> 
 
    <tbody> 
 
     <tr> 
 
     <th>ID</th> 
 
     <th>Civilité</th> 
 
     <th>Nom</th> 
 
     <th>Prénom</th> 
 
     <th>Date de Naissance</th> 
 
     <th>Ville de Naissance</th> 
 
     <th>Pays de Naissance</th> 
 
     </tr> 
 
     {% for item in identity %} 
 
     <tr> 
 
     <td>{{ item.id}}</td> 
 
     <td>{{ item.title }}</td> 
 
     <td>{{ item.lastname }}</td> 
 
     <td>{{ item.firstname }}</td> 
 
     <td>{{ item.birthday }}</td> 
 
     <td>{{ item.birthcity }}</td> 
 
     <td>{{ item.birthcountry }}</td> 
 
     </tr> 
 
    </tbody> 
 
    </table> 
 
</div>

我寫在我的兩個腳本出問題了嗎？如果您有建議，我會很樂意考慮！

謝謝！

編輯：

這是我的表：

但沒有答案，讓細胞之間的空間..

Answer 1

使用

!important; 

在你的CSS代碼

更多詳情：https://appendto.com/2016/04/css-important-rule-how-to-use-it-correctly/

.navbar { 
 
    background-color: #0083A2; 
 
} 
 
.nav navbar-brand { 
 
    color: #FFFFFF; 
 
} 
 
.active { 
 
    background-color: #454545; 
 
} 
 
h1, 
 
h2, 
 
h4 { 
 
    color: #0083A2; 
 
} 
 
.button { 
 
    display: inline; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    border-radius: 8px; 
 
    font-size: 16px; 
 
    border: 2px solid #000000; 
 
    background-color: #e8e8e8; 
 
    -webkit-transition-duration: 0.2s; 
 
    transition-duration: 0.2s; 
 
} 
 
.form-fields { 
 
    border-radius: 8px; 
 
    margin-right: auto; 
 
} 
 
.col-sm-6 { 
 
    display: inline-block; 
 
    margin-left: 10px; 
 
    width: 30%; 
 
    list-style: None; 
 
} 
 
.col-sm-8 { 
 
    list-style: initial; 
 
} 
 
.col-sm-10 { 
 
    display: inline-block; 
 
    margin-left: 10px; 
 
    width: 800%; 
 
    list-style: None; 
 
} 
 
.button:hover { 
 
    background-color: #0083A2; 
 
    color: #454545; 
 
} 
 
table { 
 
    border-spacing: 10px !important; 
 
}

<div class="col-sm-8"> 
 
    <h4><b><font color="#0083A2"> Récapitulatif des 3 dernières fiches individuelles créées: </b></font></h4> 
 
    <table> 
 
    <tbody> 
 
     <tr> 
 
     <th>ID</th> 
 
     <th>Civilité</th> 
 
     <th>Nom</th> 
 
     <th>Prénom</th> 
 
     <th>Date de Naissance</th> 
 
     <th>Ville de Naissance</th> 
 
     <th>Pays de Naissance</th> 
 
     </tr> 
 
     {% for item in identity %} 
 
     <tr> 
 
     <td>{{ item.id}}</td> 
 
     <td>{{ item.title }}</td> 
 
     <td>{{ item.lastname }}</td> 
 
     <td>{{ item.firstname }}</td> 
 
     <td>{{ item.birthday }}</td> 
 
     <td>{{ item.birthcity }}</td> 
 
     <td>{{ item.birthcountry }}</td> 
 
     </tr> 
 
    </tbody> 
 
    </table> 
 
</div>

Answer 2

這個問題可能還解決了這一點：Set cellpadding and cellspacing in CSS?

我想建議閱讀更多關於table，哪些是你可以從CSS做，specificly你不能做什麼。

在這種情況下，您可以通過使用其他類似的屬性來更改從css表的cellpadding或cellspacing。 您可以操縱單元格的填充，這與cellspacing的cellpadding和border-spacing等效。

我建議你多閱讀一下，因爲你對錶格元素的CSS看起來不合適（比如列表樣式）。

良好的開端參考可能是這樣的：http://www.w3schools.com/html/html_tables.asp

Answer 3

我找到了答案感謝@GeorgesAntonakos：

我直接寫我的HTML模板中的CSS條件：

<style> 
table, th, tr { 
border: 1px solid black; 
border-collapse: collapse; 
} 
</style> 

    <div class="col-sm-8"> 
    <h4><b><font color="#0083A2"> Récapitulatif des 3 dernières fiches individuelles créées: </b></font></h4> 
    <table style="width:100%"> 
     <tbody> 
     <tr> 
      <th>ID</th> 
      <th>Civilité</th> 
      <th>Nom</th> 
      <th>Prénom</th> 
      <th>Date de Naissance</th> 
      <th>Ville de Naissance</th> 
      <th>Pays de Naissance</th> 
     </tr> 
     {% for item in identity %} 
     <tr> 
      <td>{{ item.id}}</td> 
      <td>{{ item.title }}</td> 
      <td>{{ item.lastname }}</td> 
      <td>{{ item.firstname }}</td> 
      <td>{{ item.birthday }}</td> 
      <td>{{ item.birthcity }}</td> 
      <td>{{ item.birthcountry }}</td> 
     </tr> 
     {% endfor %} 
     </tbody> 
    </table> 
    <br></br> 
    </div> 

該解決方案爲我工作。