フィドル:まだ何の問題、ブラウザを縮小していないので、主に展開した後、サイズ変更時にdivテーブルが下枠を失うのはなぜですか?ここにある
参照:https://jsfiddle.net/9me1rrLm/
<body style="padding: 0px; margin: 0px; overflow-y: scroll; overflow-x: hidden; width: 100%;">
<div style="height:50px; overflow:hidden;">
<div style="display: table; width: 100%; height: 100%;">
<div style="display: table-row;">
<div style="display: table-cell; border-style: solid; width: 10%; vertical-align: top;">
0002
</div>
<div style="display: table-cell; border-style: solid; width: 40%; vertical-align: middle;">
Johnny Five Johnny Five Johnny Five
</div>
<div style="display: table-cell; border-style: solid; width: 30%; vertical-align: bottom;">
Robotin'
</div>
<div style="display: table-cell; border-style: solid; width: 20%; vertical-align: bottom;">
[email protected]
</div>
</div>
</div>
</div>
</body>
ブラウザはほとんど拡大し、何の問題に多少のとき:
なぜ
:その後、限り私ができるようにブラウザを縮小した後、私はテキストと下の境界線を失いますか?私は国境を失いたくないので、できるだけ多くのテキストをセル内に残しておきたい(オーバーフローは見えない)。
ありがとうございます。
EDIT1:明らかにするために、私はオーバーフローを隠したり、テーブルの高さを上げたくない。それを維持することは、この質問を難しくする原因です。例えば、私は同じ固定高さとオーバーフローがここにあり、それは私の垂直方向の配置を無視するという事実を除いて完璧に動作します。だから私は今2つのバージョンがあります。一つは、境界線が表示されなくなり、他のは、それが垂直alginmentだ(ただし、テキストの配置を可能にする)失う:
https://jsfiddle.net/2L0cggds/
<body style="padding: 0px; margin: 0px; overflow-y: scroll; overflow-x: hidden; width: 100%;">
<div style="display: table; width: 100%; height: 50px;">
<div style="display: table-row; width: 100%; height: 50px;">
<div style="display: table-cell; width: 10%;height: 50px; border-style: solid;">
<div style="overflow:hidden; height: 50px;vertical-align:bottom;text-align:right;">
0004
</div>
</div>
<div style="display: table-cell; width: 40%;height:50px;border-style: solid;">
<div style="overflow:hidden; height:50px;vertical-align:bottom;text-align:right;">
Johnny Five Johnny Five Johnny Five
</div>
</div>
<div style="display: table-cell; width: 30%;height: 50px; border-style: solid;">
<div style="overflow:hidden; height: 50px;vertical-align:bottom;text-align:right;">
Robotin'
</div>
</div>
<div style="display: table-cell; width: 20%;height:50px;border-style: solid;">
<div style="overflow:hidden; height:50px;vertical-align:bottom;text-align:right;">
[email protected]
</div>
</div>
</div>
</div>
</body>
EDIT2:を私は、これはビジュアルウェブGUIで行わ見るので、これは可能です知っています。これは、(見えないエンドとHTML/CSSを使用したと時間!)私のVisual WebGUIの中に分かかったを見て、境界線が消えていなかったとテキストがセル内に滞在する方法を参照してください。
そして、ここで私がソースを見るときに見るdivの狂気があります(それはdiv内のdiv内のdivのようなものです...私は私が最初のセルを見るポイントまで拡大して表示できます...) ):
私の謝罪:ハハさんのために
。私はテーブルを高さにしたくない(これは、固定された高さで必要なヘッダーになるだろう)。そして、もしそれらがすべてのテキストが収まらないという点まで大きさをつけたら、私は私ができる限り表示し、残りの部分(オーバーフロー)を隠しています。それがこれを難しくし、私が手を差し伸べた理由です。私はこれを見たようにこれが可能であることを知っています。私は達成しようとしているいくつかのVisual WebGUIコードの写真を追加します。 – JustLooking
それを考え出した。 Ditched divテーブルと使用されたhtmlテーブル – JustLooking