CSS應用表格內容的左右空白區域

Question

我想要設計一個與圖像中的表格類似的表格。

Table example

我可以用empy標籤APLY的空間，然後使用CSS，使他們成了白色，但這樣的代碼是醜陋的。

這是我的時刻：

<table id="specs"> 
    <tr>       
     <th class="thead" >A</th> 
     <th class="thead">B</th> 
     <th class="thead">C</th> 
     <th class="thead">D</th> 
     <th class="thead">E</th> 
    </tr> 
    <tr class="alt"> 
     <td class="type2">1</td> 
     <td class="type">2</td> 
     <td class="type">3</td> 
     <td class="type"> 4</td> 
     <td class="type">5%</td> 
     <td class="type" style="border-top:10px solid white;">6</td> 
    </tr> 
    <tr> 
     <td class="type2">7</td> 
     <td class="type">8</td> 
     <td class="type">9</td> 
     <td class="type">10</td> 
     <td class="type">11</td> 
     <td class="type">12</td> 
    </tr> 
</table> 

CSS：

#specs { 
    color: #0099FF; 
    font-size: 13px; 
    border-collapse: collapse; 
} 

#specs th { 
    background-color: #0099FF; 
    color: white; 
    padding-left: 50px; 
    padding-right: 10px; 
    border-bottom: 10px solid white; 
} 
#specs tr.alt td { 
    background-color: #C0D9D9; 
} 

#specs th.thead { 
    padding-right: 30px; 
    text-align: center; 
} 

#specs tr td.type2 { 
    border-left: 10px solid white; 
    text-align: left; 
} 

Answer 1

你首先應該形成良好的表：

<table id="specs"> 
    <thead> 
     <tr> 

      <th class="thead" >A</th> 
      <th class="thead">B</th> 
      <th class="thead">C</th> 
      <th class="thead">D</th> 
      <th class="thead" colspan="2">E</th> 

     </tr> 
    </thead> 
    <tbody> 

     <tr class="alt"> 

      <td class="type2">1</td> 
      <td class="type">2</td> 
      <td class="type">3</td> 
      <td class="type"> 4</td> 
      <td class="type">5%</td> 
      <td class="type" >6</td> 

     </tr> 
     <tr> 
      <td class="type2">7</td> 
      <td class="type">8</td> 
      <td class="type">9</td> 
      <td class="type">10</td> 
      <td class="type">11</td> 
      <td class="type">12</td> 

     </tr> 
    </tbody> 
    </table> 

它會給一些意義，你的表，並會它更容易風格。 試試這個例子：http://codepen.io/anon/pen/dilzg

Answer 2

要將每一行下添加2px的一個空白，你只需要添加使用CSS邊框，例如這樣的：

tr { 
    border-bottom : 2px solid #ffffff; 
} 

Answer 3

您需要添加一個border-left和border-right到您td但要確保你不將風格作爲tr從未工作：

td:first { 
    border-left : 10px solid #ffffff; 
} 
td:last { 
    border-right : 10px solid #ffffff; 
}