处理一个表里面的底线

我试图处理一个表里面的底线（我希望削减他们有点向右）处理一个表里面的底线

enter image description here

这里是我的表码：

<table class="reportTable"> 
    <thread> 
      <tr> 
       <th>firstColumn</th> 
       <th>secondColumn</th> 
       <th>thirdColumn</th> 
      </tr> 
    </thread> 
    <tbody> 
      <tr> 
       <td>1</td> 
       <td>2</td> 
       <td>3</td> 
      </tr> 
      <tr> 
       <td>11</td> 
       <td>22</td> 
       <td>33</td> 
      </tr> 
      <tr> 
       <td>111</td> 
       <td>222</td> 
       <td>333</td> 
      </tr> 
    </tbody> 
</table>

这里是我的CSS代码：

.reportTable th,td{ 
     border-bottom: 1px solid #E7E7E7; 
     border-right:16px solid transparent; 

}

来源

2014-10-31 Nadav Stern

是你有没有工作？它似乎是给我的。 – trnelson 2014-10-31 16:54:48

nope我想处理右边框并在列之间添加更多空格，当列的宽度设置为特定数字时，它不起作用 – 2014-10-31 16:56:08

更准确......如果您尝试添加更多空格（改变右下方的像素数量，它只会增加列的宽度，而不会让每两列之间的空间变大 – 2014-10-31 16:58:19

可以边框间距添加到表，并将其定位相对带负左推回它的原始位置。

http://jsfiddle.net/hyn1db04/3/

<table class="reportTable"> 
<thread> 
     <tr> 
      <th>firstColumn</th> 
      <th>secondColumn</th> 
      <th>thirdColumn</th> 
     </tr> 
</thread> 
<tbody> 
     <tr> 
      <td>1</td> 
      <td>2</td> 
      <td>3</td> 
     </tr> 
     <tr> 
      <td>11</td> 
      <td>22</td> 
      <td>33</td> 
     </tr> 
     <tr> 
      <td>111</td> 
      <td>222</td> 
      <td>333</td> 
     </tr> 
</tbody>

CSS

.reportTable { 
border-spacing: 30px 0; 
} 
.reportTable th, .reportTable td { 
border-bottom: 1px solid #E7E7E7; 
position: relative; 
left: -30px; 
}

编辑：或者，你可以这样做：http://jsfiddle.net/m021e4gh/8/

.reportTable th,td { 
border-bottom: 1px solid #E7E7E7; 
} 

table td + td, table th + th { 
position: relative; 
left: 30px; 
} 

table td + td + td, table th + th + th { 
position: relative; 
left: 60px; 
}

如果需要，请添加宽度。

来源

2014-10-31 17:17:12 chdltest

我相信你想要什么border-spacing财产CSS：

.reportTable { 
    border-spacing: 10px 0; 
} 
.reportTable th, .reportTable td { 
    border-bottom: 1px solid #E7E7E7; 
    border-right: 1px solid #E7E7E7; 
}

Example on JSFiddle

来源

2014-10-31 17:00:52 trnelson

不错，谢谢，但行间距的事情是，它也推动第一列，以及你知道如何避免它？ – 2014-10-31 17:04:02

处理一个表里面的底线

回答

相关问题