Question

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

我可以使用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>

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

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

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

Answer 2

您需要在border-left上添加border-right和td，但请确保不要将tr设置为永不起作用的样式：

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

Answer 3

你应该先形成你的桌子：

<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

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

3 个答案: