html - Stripy HTML テーブルと行スパン

Question

元の表 ( http://highspeedbroadband.com.my/home-package/comparison-chart-for-home-package/ )

下の画像で強調表示されているように、元を変更したいと思います。td 要素に rowspan および colspan 属性を追加することでこれを行うことができますが、ストライプ テーブルで行スパンを使用すると、代替色の順序が崩れ、見苦しい結果が得られます。

誰か助けてください。

Answer 1

<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;
}

デモ

Answer 2

これらの 3 つのテキストを、次の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 3

セル内に 3 つのスパンを作成できます。

HTML:

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

CSS:

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

デモ。