處理一個表裏面的底線

我試圖處理一個表裏面的底線（我希望削減他們有點向右）處理一個表裏面的底線

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

處理一個表裏面的底線

回答

相關問題