2017-03-16 1 views
0

フィドル:まだ何の問題、ブラウザを縮小していないので、主に展開した後、サイズ変更時にdivテーブルが下枠を失うのはなぜですか?ここにある

Image 1

参照: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> 

ブラウザはほとんど拡大し、何の問題に多少のとき:

Image 2

なぜ

enter image description here

:その後、限り私ができるようにブラウザを縮小した後、私はテキストと下の境界線を失いますか?私は国境を失いたくないので、できるだけ多くのテキストをセル内に残しておきたい(オーバーフローは見えない)。

ありがとうございます。

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の中に分かかったを見て、境界線が消えていなかったとテキストがセル内に滞在する方法を参照してください。

enter image description here

そして、ここで私がソースを見るときに見るdivの狂気があります(それはdiv内のdiv内のdivのようなものです...私は私が最初のセルを見るポイントまで拡大して表示できます...) ):

vwg image 1

答えて

0

私は私が望む正確に何の解決策を持っています。

私はdivテーブルを捨てて、通常のhtmlテーブルを使用しました(後で詳しく説明します) - "クールな子供たち"がやっていることの影響を受けたと思いますが、結果は好きです。 divテーブルでうまく動作するように強制する必要はありません。

テーブル内にもテーブルが必要です。

とにかく、ここで完璧に動作します何か:

https://jsfiddle.net/99qz9okk/

<table style="width: 100%; height: 100px; table-layout:fixed;" cellspacing="0" cellpadding="0"> 
    <tr> 
     <td style="border-style: solid; width: 10%;"> 
      <div style="height: 100px; overflow:hidden;"> 
      <table cellspacing="0" cellpadding="0" style="width: 100%; height: 100%; table-layout:fixed;"> 
      <tr> 
      <td style="vertical-align: bottom; text-align: left;"> <!-- vertical-align needs to be here, it seems --> 
      0001 
      </td> 
      </tr> 
      </table> 
      </div> 
     </td> 
     <td style="border-style: solid; width: 40%;"> 
      <div style="height: 100px; overflow:hidden;"> 
      <table cellspacing="0" cellpadding="0" style="width: 100%; height: 100%; table-layout:fixed;"> 
      <tr> 
      <td style="vertical-align: bottom; text-align: right;"> 
      Johnny Five Johnny Five Johnny Five! Johnny Five Johnny Five Johnny Five? Johnny Five Johnny Five Johnny Five!! 
      </td> 
      </tr> 
      </table> 
      </div> 
     </td> 
     <td style="border-style: solid; width: 30%;"> 
      <div style="height: 100px; overflow:hidden;"> 
      <table cellspacing="0" cellpadding="0" style="width: 100%; height: 100%; table-layout:fixed;"> 
      <tr> 
      <td style="vertical-align: bottom; text-align: center;"> 
      Robotin' 
      </td> 
      </tr> 
      </table> 
      </div> 
     </td> 
     <td style="border-style: solid; width: 20%;"> 
      <div style="height: 100px; overflow:hidden;"> 
      <table cellspacing="0" cellpadding="0" style="width: 100%; height: 100%; table-layout:fixed;"> 
      <tr> 
      <td style="vertical-align: middle; text-align: center;"> 
      [email protected] 
      </td> 
      </tr> 
      </table> 
      </div> 
     </td> 
    </tr> 
</table> 

だけで動作します。私は高さを固定しておくことができます(それは増加しません)。テキストのオーバーフローは、それが入っているセルを超えて拡大しません。私は下の境界を失うことはありません。私は、テキストを縦横に揃えることができます。完璧。

私は絶対的なnoobですが、私は最近html/css(もっとC++、C#、バックエンドなど)で手抜きしていません。しかし、私が言及したように、「クールな子供たち」はdivのことを話していましたが、divテーブルを使用するときに解決策を見つけられませんでした。理解の私の不足が入ってくるところと、これは、私は考えている、ちょっと、なぜ私の「HTMLテーブル」ソリューションを試してみないとだけ交換してください:divの表示と

  • テーブル:テーブル。
  • tr with div display:table-row;
  • div表示のtd:table-cell;

これは正確には機能しません。今のところ、私はあなたがテーブルを分割するのが好きではありません!

https://jsfiddle.net/8goq3hkv/

<div style="display: table; width: 100%; height: 100px; table-layout:fixed;"> 
    <div style="display: table-row;"> 
     <div style="display: table-cell; border-style: solid; width: 10%;"> 
      <div style="height: 100px; overflow:hidden;"> 
      <div style="display: table; width: 100%; height: 100%; table-layout:fixed;"> 
      <div style="display: table-row;"> 
      <div style="display: table-cell; vertical-align: bottom; text-align: left;"> <!-- vertical-align needs to be here, it seems --> 
      0001 
      </div> 
      </div> 
      </div> 
      </div> 
     </div> 
     <div style="display: table-cell; border-style: solid; width: 40%;"> 
      <div style="height: 100px; overflow:hidden;"> 
      <div style="display: table; width: 100%; height: 100%; table-layout:fixed;"> 
      <div style="display: table-row;"> 
      <div style="display: table-cell; vertical-align: bottom; text-align: right;"> 
      Johnny Five Johnny Five Johnny Five! Johnny Five Johnny Five Johnny Five? Johnny Five Johnny Five Johnny Five!! 
      </div> 
      </div> 
      </div> 
      </div> 
     </div> 
     <div style="display: table-cell; border-style: solid; width: 30%;"> 
      <div style="height: 100px; overflow:hidden;"> 
      <div style="display: table; width: 100%; height: 100%; table-layout:fixed;"> 
      <div style="display: table-row;"> 
      <div style="display: table-cell; vertical-align: bottom; text-align: center;"> 
      Robotin' 
      </div> 
      </div> 
      </div> 
      </div> 
     </div> 
     <div style="display: table-cell; border-style: solid; width: 20%;"> 
      <div style="height: 100px; overflow:hidden;"> 
      <div style="display: table; width: 100%; height: 100%; table-layout:fixed;"> 
      <div style="display: table-row;"> 
      <div style="display: table-cell; vertical-align: middle; text-align: center;"> 
      [email protected] 
      </div> 
      </div> 
      </div> 
      </div> 
     </div> 
    </div> 
</div> 
1

あなたはにコンテナのいずれかに高さを設定しているためですだから、テキストが折り返してセルを大きくするときに、テーブルの下を切ってしまいます。

JSFiddle

<body style="padding: 0px; margin: 0px; overflow-y: scroll; overflow-x: hidden; width: 100%;"> 

<!-- REMOVE THE HEIGHT ATTRIBUTE FROM THIS DIV --> 
<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> 
+0

私の謝罪:ハハさんのために

。私はテーブルを高さにしたくない(これは、固定された高さで必要なヘッダーになるだろう)。そして、もしそれらがすべてのテキストが収まらないという点まで大きさをつけたら、私は私ができる限り表示し、残りの部分(オーバーフロー)を隠しています。それがこれを難しくし、私が手を差し伸べた理由です。私はこれを見たようにこれが可能であることを知っています。私は達成しようとしているいくつかのVisual WebGUIコードの写真を追加します。 – JustLooking

+0

それを考え出した。 Ditched divテーブルと使用されたhtmlテーブル – JustLooking

1

オーバーフローのインラインスタイル削除:隠されたのか、コンテナの高さを調整します。

+0

しかし、私はコンテナを一定の高さにしたいと思いますし、テキストがセルから漏れることは望ましくありません。彼らは必要です。 – JustLooking

+0

次に、フォントサイズを調整したり、列の幅を広げたりするために、メディアクエリを使用することをお勧めします。単語が改行すると、その行が長くなります。 – SROwl

+0

私はVisual WebGUIコードに表示されているものを再作成しようとしています。彼らはあなたが提案したことをしないと確信しています。しかし、彼らはできる。しかし、soooooには多くのdivコンテナとCSSクラスがあり、私はソースに従うことができません。 – JustLooking

1

あなたの問題は、テーブルがそのheightが明示的にページがダウンして収縮されたときに十分な大きさではない値に設定されているdivに表示されていることであるとdivことをその上にoverflow:hiddenセットがあります。

<div style="height:100px; overflow:hidden;"> 

overflow:hiddenを削除してもそれは発生しません。変更された作業バージョンについては、hereを参照してください。

overflow:scrollを設定して全体の高さを維持し、ユーザーがオーバーフローしたすべての表をすべて表示できるようにすることもできます。それについては、hereを参照してください。

+0

謝罪します。私はテーブルを高さにしたくない(これは、固定された高さで必要なヘッダーになるだろう)。そして、もしそれらがすべてのテキストが収まらないという点まで大きさをつけたら、私は私ができる限り表示し、残りの部分(オーバーフロー)を隠しています。それがこれを難しくし、私が手を差し伸べた理由です。私はこれを見たようにこれが可能であることを知っています。私は達成しようとしているいくつかのVisual WebGUIコードの写真を追加します。 – JustLooking

+0

それを考え出した。 Ditched divテーブルと使用されたhtmlテーブル – JustLooking

2

あなたのテーブルをラップし、このコードのため、それはです:表が高くなる

<div style="height:50px; overflow:hidden;"> 

。すなわち、下側の境界線は下になりますが、折り返し部分(上を参照)はオーバーフロー部分を隠します。

あなたはそれにもかかわらず、下の境界をしたい場合は、ちょうどこのラッピングのdivにそれを適用するには:

https://jsfiddle.net/q3rxj91p/1/

+0

閉じる、種類(ボトムボーダーははるかに厚い)ですが、セル3とセル4のテキストが失われます。私はこれが可能であることを知っている、私はこれを達成するVWGによって生成されたHTMLを見つめている!私はとても近いです! – JustLooking

+0

テキストを上に揃えてみませんか?下部は 'overflow:hidden'ルール(https://jsfiddle.net/q3rxj91p/3/) – Johannes

+0

によって隠されています。なぜなら、テキストをセルのどこにでも置くことができるからです。これは、上下、中央、下、およびテキストの左揃え、右揃え、右揃えのいずれかになります。私は、あるユーティリティのために、ユーザーにシンプルなWebページを生成する機能を与えています。そこで私はヘッダー、ボディー、フッターを可能にする一種のデザイナーを組み立てています。これは私のヘッダーの一部であり、ヘッダー内でイメージ、テキスト、またはその両方を許可します(したがって、テーブルは "both"で2つの列に展開されます)。テキストは、イメージの上、左、右に置くことができます。彼らが望むようにテキストを整列させることができます – JustLooking

関連する問題