使用CSS/HTML的单元格表间距

我对

HTML/CSS

非常陌生，但我需要使用这两种语言来实现我的Django web应用程序

我的

有一个问题，因为单元格间距没有考虑到我的css文件

.navbar{
背景色：#0083A2；
}
.nav navbar品牌{
颜色：#FFFFFF；
}
.主动{
背景色：#4545；
}
h1，
h2，
h4{
颜色：#0083A2；
}
.按钮{
显示：内联；
左边距：自动；
右边距：自动；
边界半径：8px；
字体大小：16px；
边框：2倍实心#000000；
背景色：#e8e8e8；
-webkit转换持续时间：0.2s；
过渡时间：0.2s；
}
.表单字段{
边界半径：8px；
右边距：自动；
}
.col-sm-6{
显示：内联块；
左边距：10px；
宽度：30%；
列表样式：无；
}
.col-sm-8{
列表样式：首字母；
}
.col-sm-10{
显示：内联块；
左边距：10px；
宽度：800%；
列表样式：无；
}
.按钮：悬停{
背景色：#0083A2；
颜色：#4545；
}
桌子{
边界间距：100px；
}

第三次个人签名投降：
身份证件
文明
笔名
名词
出生日期
新生维尔
德纳桑斯酒店
{标识为%%的项目的%s}
{{item.id}
{{item.title}
{{item.lastname}
{{item.firstname}
{{item.birth}
{{item.birthcity}}
{{item.birthcountry}

使用

在您的css代码中，提供更多详细信息：

.navbar{
背景色：#0083A2；
}
.nav navbar品牌{
颜色：#FFFFFF；
}
.主动{
背景色：#4545；
}
h1，
h2，
h4{
颜色：#0083A2；
}
.按钮{
显示：内联；
左边距：自动；
右边距：自动；
边界半径：8px；
字体大小：16px；
边框：2倍实心#000000；
背景色：#e8e8e8；
-webkit转换持续时间：0.2s；
过渡时间：0.2s；
}
.表单字段{
边界半径：8px；
右边距：自动；
}
.col-sm-6{
显示：内联块；
左边距：10px；
宽度：30%；
列表样式：无；
}
.col-sm-8{
列表样式：首字母；
}
.col-sm-10{
显示：内联块；
左边距：10px；
宽度：800%；
列表样式：无；
}
.按钮：悬停{
背景色：#0083A2；
颜色：#4545；
}
桌子{
边框间距：10px！重要；
}

第三次个人签名投降：
身份证件
文明
笔名
名词
出生日期
新生维尔
德纳桑斯酒店
{标识为%%的项目的%s}
{{item.id}
{{item.title}
{{item.lastname}
{{item.firstname}
{{item.birth}
{{item.birthcity}}
{{item.birthcountry}

这个问题也可以通过以下方法解决：

我想建议您阅读更多关于

表的内容，以及您可以从css中做些什么，以及您不能做些什么

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

我建议您多读一点关于它的内容，因为对于表元素，您有很多看起来不合适的css（比如列表样式）

好的开始参考可能是这样的：
我找到答案要感谢@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>


表，th，tr{
边框：1px纯黑；
边界塌陷：塌陷；
}
第三次个人签名投降：
身份证件
文明
笔名
名词
出生日期
新生维尔
德纳桑斯酒店
{标识为%%的项目的%s}
{{item.id}
{{item.title}
{{item.lastname}
{{item.firstname}
{{item.birth}
{{item.birthcity}}
{{item.birthcountry}
{%endfor%}




这个解决方案对我有效

间距与您问题中的代码一致。@falguni-是什么让您认为OP试图删除间距？他们明确地将其设置为一个大数字。@falguni不起作用<代码>边框间距

和

边框折叠

对我的html没有影响page@Quentin间距正在起作用，但您忘记了

{%for identity%}

中的项在

和

之间。问题出在那里？-这是模板代码，不会出现在最终的DOM中。将其添加到HTML（而不是转换为HTML的模板语言）会使HTML无效。也没有什么。。我不知道为什么，但所有答案都不会对我的表格产生任何影响。请提供您表格和问题的更多细节，然后我们了解您的实际要求。“在这种情况下，您不能从css更改表格的单元格填充或单元格间距”-为什么不？谢谢，我找到了一个解决方案：直接在我的HTML代码中编写css，它就可以工作了@瓦伦丁-你为什么接受这个解决你问题的答案？您的评论说您的解决方案与此处建议的完全不同。@Quentin稍等，我正在写答案和工作脚本。@Quentin检查此处：有更改单元格填充或单元格间距的属性。css中还有其他等效属性，通过使用

边距

和

填充

边框折叠：折叠来实现相同的结果-这与问题中的代码（您所说的代码被忽略）的作用相反。您已删除单元格之间的间距，而不是将其设置为100px
<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>