1

td次のテーブル行が固定幅sを継承しないように、colspan を「リセット」しようとしているレスポンシブ テーブル (可変 div 幅内で幅 100% に設定) があります。

私の例では、数字 td (1 から 7) は 40px の固定幅で、クラス「位置」によって指定されます。次の表の行には 2 つのボタンがあり、それぞれ 50% である必要があります。この例では、half クラスを追加することでこれを行うことができますが、これにより「位置」クラスの幅が取り消されます。私は 8 つの tds を持っているので、ボタンにそれぞれ 4 の colspan を与えますが、最後のボタン td は 4 つの「位置」クラスの幅を継承するため、160px 固定に設定されています。colspan と固定幅をクリアすることは可能ですか?それの？

数値は (1 ～ 7) に依存する可能性があるため、同数の colspan を追加することは適切な解決策ではありません。

デモ

4

1 に答える 1

2

コメントで言ってた通り

「コードはうまく機能しています。しかし、最初tdのものは他のものよりも最大の幅を持っています。colspan="4"最初の 4td秒 (名前、1、2、3) をcolspan選択し、2 番目は他の 4td秒 (4、5、6、7) を選択しています。」

これは では機能しませんtd。必要に応じて、この方法を試してください。

HTML

<tr>
    <td colspan="8">
        <div class="half"><a href="#" class="button">Button one<a/></div>
        <div class="half"><a href="#" class="button">Button two<a/></div>
    </td>
</tr>

CSS

.half{
    float: left;
    width: 50%;
}

デモ: http://jsfiddle.net/enve/zt5W9/2/

于 2013-02-05T13:46:38.497 に答える