html - 处理表格内的底线

Question

我正在尝试处理表格内的底线(我想将它们向右切一点)

这是我的表格代码:

<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;

 }

Answer 1

您可以为表格添加 border-spacing 并将其相对于负向左放置以将其推回其原始位置。

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; 
}

如果需要，请添加宽度。