首页   技术笔记   网址导航   Json在线解析   二维码   Ip地址查询   在线流程图  
新用户注册 | 会员登录
当前位置:  开发笔记 > 编程语言 > 正文

在CSS中设置cellpadding和cellspacing？

作者：谢谢巷议 | 2023-09-02 11:52
如何解决《在CSS中设置cellpadding和cellspacing？》经验，为你挑选了22个好方法。

在一个HTML表中,cellpadding并cellspacing可以设置是这样的:

如何使用CSS完成同样的工作？


1> Eric Nguyen..：
基本
为了控制CSS中的"cellpadding",您可以简单地使用padding表格单元格.例如10px的"cellpadding":
td { 
    padding: 10px;
}

对于"cellspacing",您可以将border-spacingCSS属性应用于表.例如10px的"cellspacing":
table { 
    border-spacing: 10px;
    border-collapse: separate;
}

此属性甚至会允许独立的水平和垂直间距,有些东西你不能用老派"CELLSPACING"做.
IE中的问题<= 7
这将适用于几乎所有流行的浏览器,除了Internet Explorer通过Internet Explorer 7,你几乎没有运气.我说"差不多",因为这些浏览器仍然支持border-collapse属性,该属性合并相邻表格单元格的边框.如果你试图消除cellspacing(也就是说),cellspacing="0"那么border-collapse:collapse应该具有相同的效果:表格单元格之间没有空格.但是,这种支持是错误的,因为它不会覆盖cellspacing表元素上的现有HTML属性.
简而言之:对于非Internet Explorer 5-7浏览器,请border-spacing处理您.对于Internet Explorer,如果您的情况恰到好处(您希望0个cellspacing并且您的表尚未定义它),则可以使用border-collapse:collapse.
table { 
    border-spacing: 0;
    border-collapse: collapse;
}

注意:有关可以应用于表和哪些浏览器的CSS属性的概述,请参阅这个梦幻般的Quirksmode页面.
cellpadding ="0"仍然可以在Chrome 13.0.782.215中产生差异,即使边框折叠:折叠和边框间距应用于表格. 
大家好.为了清晰起见,我已经更新了答案,包括一个关于cellpadding的部分,我认为这很明显(只需使用"填充").希望它现在更有用. 
@LeeWhitney你需要在表格单元格上设置填充:0. 
它有点偏离主题,但在HTML5中删除了cellpadding和cellspacing属性,因此CSS是现在唯一的方法. 
是的,@ vapcguy,在你可能正在设置表格的任何无限可变的其他情况下,你需要定义更具体的选择器.以上标记为示例. 

2> 小智..：
默认



浏览器的默认行为等效于:



table {border-collapse: collapse;}
td    {padding: 0px;}




         在此输入图像描述



CELLPADDING



设置单元格内容与单元格墙之间的间距



table {border-collapse: collapse;}
td    {padding: 6px;}




        在此输入图像描述



CELLSPACING



控制表格单元格之间的空间



table {border-spacing: 2px;}
td    {padding: 0px;}




        在此输入图像描述



都



table {border-spacing: 2px;}
td    {padding: 6px;}




        在此输入图像描述



两者(特别)



table {border-spacing: 8px 2px;}
td    {padding: 6px;}




        在此输入图像描述




  
注意:如果有border-spacingset,则表示border-collapse表的属性为separate.





亲自尝试一下!



在这里你可以找到实现这一目标的旧html方式.

        
TD上的默认填充通常为1px,而不是0 

3> Pup..：
table
{
    border-collapse: collapse; /* 'cellspacing' equivalent */
}

table td, table th
{
    padding: 0; /* 'cellpadding' equivalent */
}


        
这就是`cellspacing = 0`等价物.`cellspacing = 1`的等价物完全不同.看到接受的答案. 
`table td`和`table th`不应该分别是`td`和`th`？它适用于任何一种方式,但较小的选择器意味着匹配稍快 
这实际上是我唯一可以为我工作的东西,虽然我将信息应用于id以避免过于笼统. 

4> Will Prescot..：
据我所知,设置表格单元格的边距并没有任何影响.真正的CSS等价物cellspacing是border-spacing- 但它在Internet Explorer中不起作用.



您可以使用border-collapse: collapse如上所述可靠地将单元格间距设置为0,但对于任何其他值,我认为唯一的跨浏览器方式是继续使用该cellspacing属性.

        
在今天的时代,现实是对N度的扼杀. 
这几乎是正确的,但是如果表格还没有定义`cellspacing`属性,那么`border-collapse`只适用于IE 5-7.我写了一个全面的答案,在这个页面上合并其他答案的所有正确部分,以防有用. 

5> Vitalii Fedo..：
此hack适用于Internet Explorer 6及更高版本,Google Chrome,Firefox和Opera:



table {
    border-collapse: separate;
    border-spacing: 10px; /* cellspacing */
    *border-collapse: expression('separate', cellSpacing = '10px');
}

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




该*声明适用于Internet Explorer 6和7,其他浏览器将正确忽略它.



expression('separate', cellSpacing = '10px')返回'separate',但是两个语句都在运行,因为在JavaScript中你可以传递比预期更多的参数,并且所有参数都将被评估.

        

6> Malvineous..：
对于那些想要非零单元间距值的人来说,下面的CSS对我有用,但我只能在Firefox中测试它.有关兼容性详细信息,请参阅其他位置发布的Quirksmode链接.似乎它可能不适用于较旧的Internet Explorer版本.



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


        

7> George Filip..：
这个问题的简单解决方案是: 



table
{
    border: 1px solid #000000;
    border-collapse: collapse;
    border-spacing: 0px;
}
table td
{
    padding: 8px 8px;
}


        

8> mat..：
此外,如果您愿意cellspacing="0",请不要忘记添加border-collapse: collapse您table的样式表.

        

9> Robert White..：
用div包装单元格的内容,你可以做任何你想做的事情,但你必须将每个单元格包装在一列中以获得统一的效果.例如,要获得更宽的左右边距:



所以CSS将是,







div.cellwidener {
  margin: 0px 15px 0px 15px;
}
td.tight {
  padding: 0px;
}


























        

  

    
      
My content


10> 小智..：

只需border-collapse: collapse用于你的桌子,或padding用于th或td



11> Elad Shechte..：

此样式适用于表格的完全重置 - cellpadding,cellspacing和border.

我在reset.css文件中有这种风格:

table{
    border:0;          /* Replace border */
    border-spacing: 0px; /* Replace cellspacing */
    border-collapse: collapse; /* Patch for Internet Explorer 6 and Internet Explorer 7 */
}
table td{
    padding: 0px; /* Replace cellpadding */
}



12> 小智..：

TBH.对于所有使用CSS的人来说,您可能只是使用它,cellpadding="0" cellspacing="0"因为它们不被弃用...

其他人建议利润率显然没有尝试过这个.

它们实际上已在html5中弃用.

13> 小智..：
table th,td {
    padding: 8px 2px;
}
table {
    border-collapse: separate;
    border-spacing: 2px;
}



14> suraj rawat..：

只需对表数据使用CSS填充规则: 

td { 
    padding: 20px;
}

对于边框间距:

table { 
    border-spacing: 1px;
    border-collapse: collapse;
}

但是,由于盒子模型的差异化实现,它可能会在Internet Explorer等旧版本的浏览器中产生问题.



15> 小智..：

根据我对W3C分类的理解,

s仅用于"仅显示数据".

基于此,我发现

使用背景和所有这些创建一个更容易,并有一个表,数据浮动在它上面使用position: absolute;和background: transparent;...

它适用于Chrome,IE(6及更高版本)和Mozilla(2及更高版本).

页边距被使用(或反正意味着)来创建容器元素,例如之间的间隔件

,
并且
,不
,
,或.将其用于容器元素以外的任何其他内容将使您忙于调整您的网站以供将来的浏览器更新.

OP从来没有说明他用什么表.

16> suraj rawat..：

CSS:

selector{
    padding:0 0 10px 0; // Top left bottom right 
}



17> 小智..：

您可以使用CSS padding属性在表格单元格内轻松设置填充,这是产生与表格的cellpadding属性相同效果的有效方法.

table,
th,
td {
  border: 1px solid #666;
}

table th,
table td {
  padding: 10px;
  /* Apply cell padding */
}




  
  Set Cellpadding in CSS





  

    
      

        Row
        First Name
        Last Name
        Email
      

    
    
      

        1
        Clark
        Kent
        clarkkent@mail.com
      

      

        2
        Peter
        Parker
        peterparker@mail.com
      

      

        3
        John
        Rambo
        johnrambo@mail.com


18> Falguni Panc..：

试试这个:

table {
    border-collapse: separate;
    border-spacing: 10px;
}
table td, table th {
    padding: 10px;
}

或试试这个:

table {
    border-collapse: collapse;
}
table td, table th {
    padding: 10px;
}



19> 小智..：

我!important在边界崩溃后使用过

border-collapse: collapse !important;

它在IE7中适用于我.它似乎覆盖了cellspacing属性.

在复杂的情况下,只需要`!important`来覆盖*其他CSS设置*(甚至大多数情况下都是错误的方法).

20> fuddin..：

    

        Col 1
        Col 2
        Col 3
    

    

        1
        2
        3

cell-padding可以通过paddingCSS 给出,同时cell-spacing可以通过设置border-spacing表来设置.

table {
    border-spacing: 10px;
}
td {
    padding: 10px;
}

小提琴.



21> Majid Sadr..：
td {
    padding: npx; /* For cellpadding */
    margin: npx; /* For cellspacing */
    border-collapse: collapse; /* For showing borders in a better shape. */
}

如果margin没有工作,尝试设置display的tr到block,然后利润率将正常工作.



22> 小智..：

对于表格cellspacing和cellpadding在HTML 5中已经过时.现在对于cellspacing,你必须使用border-spacing.对于cellpadding,你必须使用border-collapse.

并确保您不在HTML5代码中使用它.始终尝试在CSS-3文件中使用这些值.

推荐阅读
devbox
谢谢巷议
这个屌丝很懒，什么也没留下！
关注作者
Tags | 热门标签
RankList | 热门文章
DevBox开发工具箱 | 专业的在线开发工具网站    京公网安备 11010802040832号  |  京ICP备19059560号-6
Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved devBox.cn 开发工具箱 版权所有