Html 如何使用 CSS 在表格中设置单元格填充和单元格间距?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/16419174/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 08:10:46  来源:igfitidea点击:

How to set cellpadding and cellspacing in table with CSS?

htmlcss

提问by Sudipa Sengupta

Can someone tell me how to change table cellpadding and cellspacing like you can do it in html with:

有人可以告诉我如何更改表格单元格填充和单元格间距,就像您可以在 html 中使用:

<table cellspacing="0" cellpadding="0"> 

But how is it done with css?

但是css是怎么做的呢?

回答by kapa

Use paddingon the cells and border-spacingon the table. The former will give you cellpadding while the latter will give you cellspacing.

使用padding在细胞上,border-spacing在桌子上。前者会给你单元格填充,而后者会给你单元格间距。

table { border-spacing: 5px; } /* cellspacing */

th, td { padding: 5px; } /* cellpadding */

jsFiddle Demo

jsFiddle 演示

回答by Milche Patern

The padding inside a table-divider (TD) is a padding property applied to the cell itself.

表格分隔符 (TD) 内的填充是应用于单元格本身的填充属性。

CSS

CSS

td, th {padding:0}

The spacing in-between the table-dividers is a space between cell borders of the TABLE. To make it effective, you have to specify if your table cells borders will 'collapse' or be 'separated'.

表格分隔线之间的间距是表格单元格边界之间的空间。为了使其有效,您必须指定表格单元格边框是“折叠”还是“分离”。

CSS

CSS

table, td, th {border-collapse:separate}
table {border-spacing:6px}

Try this : https://www.google.ca/search?num=100&newwindow=1&q=css+table+cellspacing+cellpadding+site%3Astackoverflow.com( 27 100 results )

试试这个:https: //www.google.ca/search?num=100 &newwindow=1&q=css+table+cellspacing+cellpadding+site%3Astackoverflow.com(27 100 个结果)

回答by Nitesh

Here is the solution.

这是解决方案

The HTML:

HTML:

<table cellspacing="0" cellpadding="0">
    <tr>
        <td>
            123
        </td>
    </tr>
</table>

The CSS:

CSS:

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

Hope this helps.

希望这可以帮助。

EDIT

编辑

td, th {padding:0}