Интервал между ячейками с CSS/HTML

Question

Я действительно знаком с HTML/CSS, но мне нужно использовать оба языка для реализации моего веб-приложения Django.

У меня проблема с моим <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>

я написал что-то неправильное в моих двух сценариев? Если у вас есть советы, я буду с удовольствием принимать во внимание!

Спасибо!

EDIT:

Это мой стол:

Но ни один ответ сделать пространство между ячейками ..

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 и специфически, что вы не можете сделать.

В этом случае вы можете изменить cellpadding или cellspacing из таблицы css, используя другие подобные свойства. Вы можете манипулировать заполнением ячеек, которое является эквивалентом cellpadding и border-spacing для ячейки.

Предлагаю вам прочитать немного больше об этом, так как у вас много CSS для элементов таблицы, которые кажутся неуместными (например, стиль списка).

Хорошая стартовая ссылка может быть такой: http://www.w3schools.com/html/html_tables.asp

Answer 3

Я нашел ответ благодаря @GeorgesAntonakos:

Я должен написать условия CSS непосредственно в моем HTML шаблон:

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

Это решение работает на меня.