2

モバイル Web サイトのデザインで毎日のスケジュール ビューを再作成しようとしています。PC版はこんな感じ。

ここに画像の説明を入力

複数の行と、最大 5 または 6 列があります。テーブルが最適だと思いますが、これを希望どおりに機能させるための適切な CSS/HTML が見つかりません。

最初の列に自動幅を設定し、コンテンツに合わせて、残りを等しく (均等に分散) したい。テーブル全体が 100% 幅になります。

これは、列幅を次のように設定することで取得できます。50%; 50%; -- 使用しないtable-layout: fixed; 問題は、コンテンツが大きすぎるという理由だけで、セルの幅を広くすることができないことです。を使用するtable-layout: fixedと、セルは正しいサイズに保たれますが、最初の列は auto/fit ではなく幅 0 です。span または div の各セル内にコンテンツを配置して、それらを :width: 100%; overflow: hidden;に設定しようとしましたが、 width: 100% が固定されていないテーブル内で実際に機能するとは思いません。

本当に必要な場合は、最初の列に固定幅を設定しますが、固定フォント サイズを使用したくないため、これは避けたいと思います。特に、これはスマートなモバイル Web サイトになるためです。 - 電話とタブレット。

ネストされたテーブルまたはフロートを使用して何かできるかもしれません...最初の列は同じテーブルの一部ではありませんが、欠けている非常にクリーンなソリューションがあることを望んでおり、これらすべてを保持できます単一のテーブルで。

編集: 要求に応じて、これは私が試したコードの 1 つのバージョンです。名前の前に x が付いているスタイルは、私が試したものとはまったく異なります (x を追加して、すばやく削除し、簡単に元に戻します)。

<table cellpadding="0" cellspacing="0" style="width: 100%; xwhite-space: nowrap; xtable-layout: fixed;">
    <tr>
    <td style="width: 0; background-color: Lime;">
    Time
    </td>
    <td style="width: 50%; background-color: Silver;">
    ERIC
    </td>
    <td style="width: 50%; background-color: Gray;">
    DONNA
    </td>
    </tr>
    <tr>
    <td>8:00am</td><td>&nbsp;</td><td>Do Something</td>
    </tr>
    <tr>
    <td>9:00am</td><td style="width: 50%; overflow: hidden;"><div style="width: 100%; height: 100%; overflow: hidden;">Do Something else with more text so we can see how this works when too long and really longer than it ever should be</div></td><td style="width: 50%;">&nbsp;</td>
    </tr>
    </table>

上記のバージョンは私が得た限り近いものですが、午前 9 時の「ERIC」の長いテキストは複数の行に折り返されています。ラップしないように変更すると、セルが広すぎます(オーバーフローがあっても: 非表示)。

4

2 に答える 2

3

テーブルの幅は 100% で、2 番目と 3 番目の列はそれぞれ幅が 50% で、最初の列は 0% です。確かに、2 番目と 3 番目の列の 100% の幅を既に使用しているため、機能しません。

于 2013-08-28T04:33:08.693 に答える
0

1 つのテーブルでやりたいことを実行できない場合に備えて、思ったほど悪くないように見えるネストされたテーブル ソリューションを次に示します。

<table cellpadding="0" cellspacing="0" style="width: 100%;">
<tr>
<td style="width: 0;">
<table cellpadding="0" cellspacing="0">
<tr><td>Time</td></tr>
<tr><td>8:00am</td></tr>
<tr><td>9:00am</td></tr>
</table>
</td>
<td>
<table cellpadding="0" cellspacing="0" style="width: 100%; table-layout: fixed; white-space: nowrap;">
<tr><td>ERIC</td><td>DONNA</td></tr>
<tr><td style="overflow: hidden;">This cell has a lot of text so that I can test for overflow issues even if I make my browser window very wide</td><td>&nbsp;</td></tr>
<tr><td>&nbsp;</td><td>Whatever</td></tr>
</table>
</td>
</tr>
</table>

フィドル: http://jsfiddle.net/fWFPm/4/

于 2013-08-28T16:44:36.600 に答える