CSS水平表单元格间距：如何？ [英] CSS horizontal table cell spacing: how?

查看：93
本文介绍了CSS水平表单元格间距：如何？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

希望这是一个简单的方法，但我还没有找到解决方案。



示例

  |单元格|<  - 空格 - > |单元格|<  - 空格 - > | Cell |

重要的一点是我不想在边缘留出空间。有一个border-spacing属性，但它在IE（6或7）中不被支持，所以这是不好的。



最好的办法是在我的表格单元格上填充右边：10px，并为最后一个单元格添加一个类删除填充。这不太理想，因为额外的空间是不在其外的单元的一部分。我猜你可以用透明的边框做同样的事情？



我也尝试过使用jQuery：



<$ p $ （right-padding）; $ b $（table> tbody> tr：not（：last-child）。 b}）;

但即使在只有大约100行的表上， 400ms在某些情况下，这是太慢。



任何帮助表示赞赏。



谢谢



对于那些建议列他们不工作。试试这个： 

 < html> 
< head> 
< title>布局< / title> 
< style type =text / css> 
 table {border：1px solid black;} 
 td {background：yellow;} 
< / style> 
< / head> 
< body> 
< table> 
< ; col style =padding-right：30px;> 
 < col> 
< tr> 
< td> 1< / td> 
< td> 2< / td&g吨; 
< td> 3< / td> 
< / tr> 
< tr> 
< td> 4< / td> 
< td> 5< / td> 
< td> 6< / td> 
< / tr> 
< tr> 
< td> 7< / td> 
< td> 8< / td> 
< td> 9< / td> 
< / tr> 
< / table> 
< / body> 
< / html>


解决方案

强>透明边框？我很确定这会为你做... ...

pre code $ table b
border：solid 5x transparent;
}

您只能像横向 ... 

  table td {
 border-left：solid 10px transparent; 
} 
表td：第一个孩子{
 border-left：0; 
}

下面是我相信你正在努力完成的一个完整的工作演示。 。

 <！DOCTYPE html PUBLIC -  // W3C // DTD XHTML 1.0 Strict // ENhttp：/ /www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd\"> 
 
< html> 
< head> 
< title>布局< /标题> 
< style type =text / css> 
表格{
 border：1px纯黑色; 
} 
 
 table td {
 background：yellow; 
 border-left：实体10px透明; 
} 
 
表td：第一个孩子{
 border-left：0; 
} 
< / style> 
< / head> 
< body> 
< table> 
< tr> 
< td> 1< / td> 
< td> 2< / td> 
< td> 3< / td> 
< / tr> 
< tr> 
< td> 4< / td> 
< td> 5< / td> 
< td> 6< / td> 
< / tr> 
< tr> 
< td> 7< / td> 
< td> 8< / td> 
< td> 9< / td> 
< / tr> 
< / table> 
< / body> 
< / html>

我不相信IE6支持CSS：first-child，所以这是一个解决方法。 .. 

 <！ -  [if IE 6]> 
< style type =text / css> 
 table td {
 border-left：expression（this.previousSibling == null？'0'：'solid 5px transparent'）; 
} 
< / style> 
<！[endif]  - >


Hopefully this is an easy one but I have not found a solution. I want to put space between columns on a table.

Example

| Cell |<- space ->| Cell |<- space ->| Cell |

An important point is that I do not want space on the edges. There is a border-spacing property but it is not supported in IE (6 or 7) so that is no good. It also puts space at the edges.

The best I have come up with is to put padded-right: 10px on my table cells and add a class to the last one to remove the padding. This is less than ideal because the extra space is part of the cell not outside it. I guess you could do the same thing with a transparent border?

I also tried using jQuery:

$(function() {
  $("table > tbody > tr:not(:last-child").addClass("right-padding");
});

but even on tables that are only ~100 rows in size this was taking 200-400ms in some cases, which is too slow.

Any help appreciated.

Thanks

To those suggesting columns they do not work. Try this:

<html>
<head>
  <title>Layout</title>
  <style type="text/css">
    table { border: 1px solid black; }
    td { background: yellow; }
  </style>
</head>
<body>
<table>
<col style="padding-right: 30px;">
<col style="padding-right: 30px;">
<col>
<tr>
  <td>1</td>
  <td>2</td>
  <td>3</td>
</tr>
<tr>
  <td>4</td>
  <td>5</td>
  <td>6</td>
</tr>
<tr>
  <td>7</td>
  <td>8</td>
  <td>9</td>
</tr>
</table>
</body>
</html>

解决方案

How about giving each table cell a transparent border? I am pretty sure this will do it for you...

table td {
  border:solid 5x transparent;
}

And you can only apply it horizontally like so...

table td {
  border-left:solid 10px transparent;
}
table td:first-child {
  border-left:0;
}

Here's a complete working demo of what I believe you are trying to accomplish...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>
  <head>
    <title>Layout</title>
    <style type="text/css">
      table {
        border: 1px solid black;
      }

      table td {
        background: yellow;
        border-left:solid 10px transparent;
      }

     table td:first-child {
       border-left:0;
     }
    </style>
  </head>
  <body>
    <table>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
      </tr>
      <tr>
        <td>4</td>
        <td>5</td>
        <td>6</td>
      </tr>
      <tr>
        <td>7</td>
        <td>8</td>
        <td>9</td>
      </tr>
    </table>
  </body>
</html>

I do not believe IE6 supports the CSS :first-child, so here is a workaround for that...

<!–-[if IE 6]>
<style type="text/css">
  table td {
    border-left: expression(this.previousSibling == null ? '0' : 'solid 5px transparent');
  }
</style>
<![endif]-->

这篇关于CSS水平表单元格间距：如何？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆