0

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

表格示例

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

3 回答 3

0

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

tr {
    border-bottom : 2px solid #ffffff;
}
于 2013-07-09T08:40:12.400 回答
0

你需要添加一个border-leftandborder-right到你的td虽然确保你不设置样式，tr因为它永远不会起作用：

td:first {
    border-left : 10px solid #ffffff;
}
td:last {
    border-right : 10px solid #ffffff;
}
于 2013-07-09T08:48:25.587 回答
0

你应该首先很好地形成你的桌子：

<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

于 2013-07-09T08:53:08.363 回答