html - 如何将 3 列设计变成最后一列具有背景图像的表格

Question

我来找你寻求帮助，我用 bootstrap 3 开发了一个网站，并希望为其中一个列实现一个表。

该表格有 3 列，最后一列具有带圆 Angular 的蓝色垂直背景。我不知道该怎么做。我做了一张 table ，但不确定从这里去哪里。任何帮助都会很棒。

代码如下:

<div class="table-responsive">
<table class="table">
    <thead>
        <tr>
            <th>price /month</th>
            <th># loads /month</th>
            <th>you save</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>$50</td>
            <td>4</td>
            <td>$2</td>
        </tr>
        <tr>
            <td>$90</td>
            <td>8</td>
            <td>$2</td>
        </tr>
        <tr>
            <td>$120</td>
            <td>12</td>
            <td>$12</td>
        </tr>
        <tr>
            <td>$160</td>
            <td>16</td>
            <td>$12</td>
        </tr>
        <tr>
            <td>$190</td>
            <td>20</td>
            <td>$22</td>
        </tr>
    </tbody>
</table>

Answer 1

使用 bootstrap，您可能想要摆脱表格 strip 化，但这与您正在寻找的非常接近:

JS fiddle example here

CSS

.topbg {
    padding: 5px;
    background-color: #6699FF;
    width: 50px;
    -webkit-border-top-left-radius: 6px;
    -webkit-border-top-right-radius: 6px;
    -moz-border-radius-topleft: 6px;
    -moz-border-radius-topright: 6px;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
}

.cbg {
padding: 5px;
    background-color: #6699FF;
}

.bottombg {
padding: 5px;
background-color: #6699FF;
    -webkit-border-bottom-right-radius: 6px;
    -webkit-border-bottom-left-radius: 6px;
    -moz-border-radius-bottomright: 6px;
    -moz-border-radius-bottomleft: 6px;
    border-bottom-right-radius: 6px;
    border-bottom-left-radius: 6px;
}

HTML

<div class="table-responsive">
<table class="table">
    <thead>
        <tr>
            <th>price /month</th>
            <th># loads /month</th>
            <th class="topbg">you save</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>$50</td>
            <td>4</td>
            <td class="cbg">$2</td>
        </tr>
        <tr>
            <td>$90</td>
            <td>8</td>
            <td class="cbg">$2</td>
        </tr>
        <tr>
            <td>$120</td>
            <td>12</td>
            <td class="cbg">$12</td>
        </tr>
        <tr>
            <td>$160</td>
            <td>16</td>
            <td class="cbg">$12</td>
        </tr>
        <tr>
            <td>$190</td>
            <td>20</td>
            <td class="bottombg">$22</td>
        </tr>
    </tbody>
</table>


  </div>