Html CSS在表格内容的左侧和右侧应用空白

我想设计一个看起来像图中表格的表格

我可以使用empy标签，然后使用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>

---

要在每行下添加2px的空白，只需使用css添加边框，例如：

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

---

您需要在

td

上添加一个

左边框

和

右边框

，但请确保不要设置

tr

的样式，因为这样做是行不通的：

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

---

你应该先把桌子摆好：

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

A.
B
C
D
E
1.
2.
3.
4.
5%
6.
7.
8.
9
10
11
12

它将赋予您的桌子一些意义，并使其更易于设计。

---

试试这个例子：

你说的是保证金吗？

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