在 CSS 中设置单元格填充和单元格间距?

问题描述

在 HTML 表格中，cellpadding 和 cellspacing 可以这样设置:

In an HTML table, the cellpadding and cellspacing can be set like this:

<table cellspacing="1" cellpadding="1">

如何使用 CSS 实现相同的效果?

How can the same be accomplished using CSS?

推荐答案

基础知识

用于控制cellpadding"在 CSS 中，您可以简单地在表格单元格上使用 padding.例如.对于 10px 的cellpadding":

For controlling "cellpadding" in CSS, you can simply use padding on table cells. E.g. for 10px of "cellpadding":

td {
    padding: 10px;
}

对于cellspacing"，您可以将 border-spacing CSS 属性应用于您的表格.例如.对于 10px 的cellspacing":

For "cellspacing", you can apply the border-spacing CSS property to your table. E.g. for 10px of "cellspacing":

table {
    border-spacing: 10px;
    border-collapse: separate;
}

此属性甚至允许单独的水平和垂直间距，这是老式单元格间距"无法做到的.

This property will even allow separate horizontal and vertical spacing, something you couldn't do with old-school "cellspacing".

IE ≤ 7 中的问题

这几乎适用于所有流行的浏览器，但 Internet Explorer 到 Internet Explorer 7 除外，在这些浏览器中您几乎不走运.我说几乎"因为这些浏览器仍然支持 border-collapse 属性，它合并相邻表格单元格的边框.如果您试图消除单元格间距(即 cellspacing=0")，那么 border-collapse:collapse 应该具有相同的效果:表格单元格之间没有空格.但是，这种支持存在问题，因为它不会覆盖 table 元素上现有的 cellspacing HTML 属性.

This will work in almost all popular browsers except for Internet Explorer up through Internet Explorer 7, where you're almost out of luck. I say "almost" because these browsers still support the border-collapse property, which merges the borders of adjoining table cells. If you're trying to eliminate cellspacing (that is, cellspacing="0") then border-collapse:collapse should have the same effect: no space between table cells. This support is buggy, though, as it does not override an existing cellspacing HTML attribute on the table element.

简而言之:对于非 Internet Explorer 5-7 浏览器，border-spacing 可以处理您的问题.对于 Internet Explorer，如果您的情况恰到好处(您想要 0 个单元格间距并且您的表格尚未定义它)，您可以使用 border-collapse:collapse.

In short: for non-Internet Explorer 5-7 browsers, border-spacing handles you. For Internet Explorer, if your situation is just right (you want 0 cellspacing and your table doesn't have it defined already), you can use border-collapse:collapse.

table {
    border-spacing: 0;
    border-collapse: collapse;
}

注意:有关可应用于表格以及适用于哪些浏览器的 CSS 属性的详细概述，请参阅此 很棒的 Quirksmode 页面.

Note: For a great overview of CSS properties that one can apply to tables and for which browsers, see this fantastic Quirksmode page.

这篇关于在 CSS 中设置单元格填充和单元格间距?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！