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>

私は私の2つのスクリプトで間違った何かを書きましたか？アドバイスがあれば、私は喜びを考慮に入れます！

ありがとうございました！

EDIT：これは私のテーブルである

：あなたのCSSコードで使用

!important; 

しかしなしの回答がセル間にスペースを作る。..

Answer 1

より詳細：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と何をあなたが行うことができないものをspecificly CSSから行うことができ詳細を読むことをお勧めしたいと思います。

この場合、他の同様のプロパティを使用して、セルパッドまたはセルペーシングをCSSからテーブルから変更することができます。 セルスペースのセルパディングとボーダースペーシングに相当するセルのパディングを操作できます。

（リストスタイルのような）外れているような表要素のためにCSSをたくさん持っているので、少し詳しくお読みください。 @GeorgesAntonakosに私が見つけた

Answer 3

http://www.w3schools.com/html/html_tables.asp回答ありがとう：

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

このソリューション：

私は私のHTMLテンプレート内に直接CSSの条件を記述する必要が

良い出発参照は、この可能性があり私のために働く。