单元格表格间距与CSS / HTML

Question

我对HTML/CSS真的很新，但我需要使用两种语言来实现我的Django Web应用程序。

我的<table>出现问题，因为我的css文件中没有考虑单元格间距。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

我在两个脚本中写错了什么？如果您有建议，我会高兴地考虑到这一点！

谢谢！

编辑：

这是我的表：

但没有一个答案在细胞之间留出空间。

Answer 1

这个问题也可以通过以下方式解决：Set cellpadding and cellspacing in CSS?

我建议您详细了解table以及您可以从css做些什么，特别是您不能做的事情。

在这种情况下，您可以使用其他类似属性从css更改表格的cellpadding或cellspacing。 您可以操作单元格的填充，这相当于cellspding和cellpacing的边距。

我建议你多读一些关于它的内容，因为你有很多css表格元素似乎不合适（如list-style）。

良好的起始参考可能是：http://www.w3schools.com/html/html_tables.asp

Answer 2

感谢@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>

此解决方案适合我。

Answer 3

使用

!important;

在您的css代码中有更多详情：https://appendto.com/2016/04/css-important-rule-how-to-use-it-correctly/

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;