0

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

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

请有人帮助我。

条纹表

4

3 回答 3

0

尝试用另一个包裹这三个文本，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>
(...)
于 2013-10-09T09:31:04.050 回答
0

您可以在单元格内制作 3 个跨度。

HTML：

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

CSS：

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

演示。

于 2013-10-09T09:41:19.510 回答
0 
<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;
}

演示

于 2013-10-09T09:48:19.630 回答