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