質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

2回答

333閲覧

CSS 幅、スクロール表示に関する質問

退会済みユーザー

退会済みユーザー

総合スコア0

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2018/06/17 08:13

編集2018/06/19 03:52

CSSに関する質問です。
すみません、よいタイトルがみつかりません。

画面上2つの表示領域があります。
左側がwidth:60%、右側がwidth:40%になっています。
右側の表示エリアにTABLEを置いてwidth:100%にしています。
ただ、これだと、TABLEの内容が長い文章が入った時に、
右側の表示領域が全体の40%を超えてしまいます。
そこで、overflow:scrollを入れてスクロールバーを出させようとしたのですが
TABLEのwidth:100%指定では結局全部表示しようと広げてしまいます。
max-widthを指定すれば、右側全領域の40%にみたないサイズの表示をしてしまいます。
こういう時はどうすればよいのでしょうか?

例)
あああ・・・・のところを改行させずに横スクロールバーを出したくて
nowrapで改行させず、scrollをいれたのですが、

<p>のstyleを固定widthにすれば、画面サイズが広いときに めいっぱい広がってくれないし、100%にすれば、スクロールバーは 表示しても、親の40%を超えて広がって意味がない状態になってしまうので こういうときはどうすればよいのかわからずにいます。 ※そもそもTABLEでレイアウトしてるのがいけないかもしれませんが、  %を使用している限り同じような気がして試していません・・・。
<html> <head> </head> <body> <table width="100%" border="1" cellspacing="0"> <tr> <td width="60%" valign="top" style="white-space: nowrap; table-layout: fixed;"> あいうえお </td> <td width="40%" valign="top" style="white-space: nowrap; table-layout: fixed;"> <p style="width:100%; overflow:scroll;"> ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ </p> </td> </tr> </table> </body> </html>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kei344

2018/06/17 12:02

具体的にHTMLおよびCSSを質問文に追記されたほうが回答を得られやすいと思います。
m.ts10806

2018/06/18 00:53

可能でしたら画面キャプチャ・現象確認されたブラウザ・バージョンもご提示ください。
guest

回答2

0

table-layout: fixed を使ってみてはどうでしょうか?
https://developer.mozilla.org/ja/docs/Web/CSS/table-layout

それでも問題が起こるようなら具体的な例を提示してもらいたいです。

投稿2018/06/18 04:12

編集2018/06/18 04:15
x_x

総合スコア13749

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

ベストアンサー

table-layout: fixed; の位置が違いますよ。

HTML

1<body> 2<table width="100%" border="1" cellspacing="0" style=" 3 table-layout: fixed; 4"> 5 <tr> 6 <td width="60%" valign="top"> 7 あいうえお 8 </td> 9 <td width="40%" valign="top"> 10 <p style="width:100%; overflow:scroll;"> 11 ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ 12 </p> 13 </td> 14 </tr> 15</table> 16```**動くサンプル:**[https://jsfiddle.net/gv2npzq6/](https://jsfiddle.net/gv2npzq6/)

投稿2018/06/19 04:08

kei344

総合スコア69366

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2018/06/19 04:14

あああ>< そんな単純ミスでしたか。 もうしわけありません。できました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問