Stripy HTML 表格和行跨度答案

【问题标题】：Stripy HTML tables and rowspanStripy HTML 表格和行跨度
【发布时间】：2013-10-16 13:51:03
【问题描述】：

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

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

请有人帮助我。

【问题讨论】：

【解决方案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>
(...)

【讨论】：

不允许在内联元素 (td) 中添加块元素 (table)，除非它是 HTML5，但因为它没有被标记...
你在 OP 的网站上看到 DOCTYPE 了吗？
我不只是点击随机链接，而是检查了它，你是对的。（嗯，看不到撤消我的反对票）
现在可以了。我不得不编辑我的答案。 Here's the explanation.

【解决方案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.

【讨论】：

【解决方案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

【讨论】：