条纹HTML表和rowspan

Question

原始表格（http://highspeedbroadband.com.my/home-package/comparison-chart-for-home-package/）

我想修改下面图片中突出显示的原件。我可以通过将rowpan和colspan属性添加到td元素来实现这一点，但是当我在条带表中使用行跨度时，替代颜色的顺序会中断并给我带来难看的结果。

有人帮帮我。

Answer 1

尝试用另一个table包装这三个文本，其中每个 FREE xmins 将是一个新的表格单元格（<td>），如下所示：

(...)
<td colspan="3">
    <table>
        <tr>
            <td>FREE 50 mins</td>
            <td>FREE 100 mins</td>
            <td>FREE 200 mins</td>
        </tr>
    </table>
</td>
(...)

Answer 2

你可以在细胞内制作3个跨度。

HTML：

<td>
    <span>1</span>
    <span>2</span>
    <span>3</span>
</td>

CSS：

table td span {
    display: inline-block;
    width: 30%;
    background: lightblue;
}

DEMO

Answer 3

<td colspan="3" id="TD_97"> <div class="xyz">
    <div class="abc">   &nbsp;FREE 50mins  </div>
<div class="abc">   FREE  100mins  </div>
<div class="abc">   FREE 200mins  </div>

       <div class="aa">   *RM0.15/min (local fixed and mobile call)</div> </div>
                </td>

CSS

  .xyz{
height: 168px;
    line-height: 21px;
    outline: rgb(81, 94, 108) none 0px;
    padding: 8px;
    text-align: center;
    vertical-align: middle;
  float:right;
    width: 250px;
}
.abc {
    float:left;
    width:77px;
    height:100px;
    padding-top:50px;
    border:double 3px black;
}
.aa {
    border-top:none;
    border:double 3px black;
  padding:0;
  margin:0;
    clear:both;
}

DEMO