プロが教える店舗＆オフィスのセキュリティ対策術

詳しい人求む！

テーブルのセルデータを自動改行させずに、はみ出た部分は切り捨てたい

解決済

  • 質問者：zyousuke
  • 質問日時：
  • 回答数：15件

いつもお世話になっています。
テーブルで、スマホ等の横幅が狭い画面で見た場合には、自動改行するのでなく、1行で表示できるように後尾を非表示にするには、どうすれば良いですか。
一番簡単な方法をご教示ください。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (15件中1～10件)

No.1

後尾を非表示にするのですよね。



だったらてっとり早いのは次のセルにデータをいれることです。
次のセルにデータがはいっていたらセルのデータの後尾は当然ながら表示されません。

何もデータがなければ空白のデータをいれてください。
    • good
    • 0
    • 件
通報する
この回答へのお礼

ありがとうございます。
次のセルにデータをいれるというのが良く分かりません。
自動改行させずに、改行される部分より後は非表示にしたいと思っています。
例えば、次のコードはスマホで表示すると2行になってしまいダサいのです。
<tr>
<td>あいうえお</td>
<td>かきくけこ</td>
<td>さしすせそ</td>
<td>たちつてと</td>
<td>なにぬねの</td>
</tr>

よろしければ見本コードをご教示ください。

通報する
お礼日時：2024/03/31 07:33

No.2

No1です。



すみません、私の勘違いです。
回答を撤回させて頂きます。
申し訳ありませんでした。
    • good
    • 0
    • 件
通報する
この回答へのお礼

承知しました・・・
やはり簡単には出来なそうですね。
(´Д｀)

通報する
お礼日時：2024/03/31 07:48

No.3

  • 回答者： gura_
  • 回答日時：

zyousuke さん


　････1行で表示できるように後尾を非表示にするには、どうすれば良いですか。････････

word-break: keep-all; overflow: hidden;
を使います。

例↓

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<style>
td {
display: inline-block; width: 8rem;
word-break: keep-all; overflow: hidden;
}
td:last-child {
width: 12rem;
}
</style>
</head>
<body>

<table border="1">
<tr>
<td>あいうえお</td>
<td>かきくけこさしすせそ</td>
<td>たちつてとなにぬねのはひふへほ</td>
</tr>
</table>
</body>
</html>
    • good
    • 0
    • 件
通報する
この回答へのお礼

ありがとうございます。
いただいたコードを試しました。
このコードで、セル内で改行されなくなりました。
しかし、スマホなど小さい画面で見ると3個目のセルが2行目に表示されてしまいました。
またデータに空白文字がある場合には、セル内での改行も発生してしまうようです。
簡単に考えていましたが難題でした。

通報する
お礼日時：2024/03/31 11:38

No.4

  • 回答者： ssawatake
  • 回答日時：

tdタグに以下のcssを適用させる。



td {
overflow: hidden;
white-space: nowrap;
max-width: 200px;←←←←セルサイズを書く
}
    • good
    • 0
    • 件
通報する
この回答へのお礼

ありがとうございます。
overflow: hiddenで尻をカットし、
white-space: nowrapで改行を禁止する。
いい感じです。
しかし、max-widthで幅を制限してしまうと、PCなど大きい画面で見た時も小さいテーブルになってしまい、
また、出来ればセル幅は、他の列との兼ね合いでなるべく大きくなるようにしたいのです。
例えば1列目と2列目が50pxで足りる時は、3列目の幅をなるべく大きくして、カットされる部分を少なくしたいです。
要望が多く恐縮です。

通報する
お礼日時：2024/03/31 12:06

No.5

  • 回答者： gura_
  • 回答日時：

････空白文字がある場合には、セル内での改行も発生･･････



こうしたらどうですか。↓

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<style>
tr{ display: flex; width: 60vw;} /* 60vw 値は任意に設定 */
td {
white-space: nowrap; overflow: hidden;
}
/* 以下数値はセル幅対応で設定 */
td { flex: 2; }
td:first-child { flex: 1; }
td:last-child { flex: 3; }
</style>
</head>
<body>
<table border="1">
<tr>
<td>あいうえお</td>
<td>かきくけこさしすせそたちつてと</td>
<td>abcdefg hijklmnopqrstuvwxyz</td>
<td>なにぬねの はひふへほまみむめも　やいゆえよらりるれろわいうえを</td>
</tr>
</table>
</body>
</html>
    • good
    • 0
    • 件
通報する
この回答へのお礼

いいですね！
display: flexは良く分からないのですが、これとwidth: 100vwを組み合わせると、テーブル幅が画面いっぱいに広がって良い感じになりました。
つまりvwはビューポート幅に対するパーセンテージを設定する場合に使う単位なのですね。
さらにmax-width: 100vwとすると、データの長さによってテーブル幅が伸縮するようになりました。
ただしdisplay: flexとするとborder-collapseが無効化されるようで、細かいですが微妙に気になります。
しかし当初の要望をほぼほぼ解決していただき満足です。
気が向いたらborder-collapseの件も教えてください。

通報する
お礼日時：2024/03/31 20:52

No.6

  • 回答者： ssawatake
  • 回答日時：

>>PCなど大きい画面で見た時も小さいテーブルになってしまい・・・



これは、同一ソースをPCでもスマホでも機器に応じたスタイルで表示したいと言う事を実現するレスポンシブデザインの範疇の話です。

ブラウザの横幅を見て、PCと判断したらPC専用のCSSを当てる、スマホと判断したら、スマホ専用のCSSを当てる・・・
こういう事をしないと出来ないのです。

詳細はレスポンシブデザインで検索してやり方を学んで下さい。
htmlのcss宣言時にブラウザの横に応じて当てるcssファイルを別ファイルにします。
つまり、cssファイルはPC用とスマホ用の2個準備します（当然ファイル名は異なる）

現時点の主流は、こういうレスポンシブデザインなのです。
    • good
    • 0
    • 件
通報する
この回答へのお礼

私が作ったほとんどのページはメタタグでビューポートの設定をするだけで、ほぼレスポンシブデザインが完成すると考えており、レスポンシブデザインのために別々のファイルを用意するというのは消極的です。

そしてNo.5guraさんのコードでは、border-collapseが無効化されてしまうという問題を除いて、当初の要望がほぼ解決しました。
出来ればこのコードをさらに改善させてborder-collapseを有効化したいと考えています。
いかがでしょうか。

通報する
お礼日時：2024/03/31 21:14

No.7

  • 回答者： admiral_ya
  • 回答日時：

タブレットの横長配置のときは、AndroidやiOSであっても、PCと同じ配置を基本にするのが質問者の意図でしょうから、アプリの横幅で分岐してはどうでしょう?


この方法だと、逆にPCでもブラウザのウィンドウ幅を小さくすると、非表示になってしまいますが…

具体的な方法は、非表示する方法は既に他の方が書かれているので、分岐部分だけ書き込むと

/* 最初にスマホ、PCどちらでも良いのでメインとする設定を書く */
@media screen and (width <= 42em), screen and (width <= 480px) {/* 寸法は自分の意図に合わる */
/* 上の例は <= (以下) を条件としているので、幅の狭い側を意味するが、
メインでなくもう一方の辺こする側の設定を書く */
}

といった要領でできるのではないでしょうか
    • good
    • 0
    • 件
通報する
この回答へのお礼

@media初めて知りました。
しかしNo.5guraさんのコードを使う事によって、別々の設定を用意する事無く、本件の要望を解決する事が出来ました。
しかし、guraさんのコードを使うとborder-collapseが無効化されてしまうという新たな問題が発生してしまい、今度は、これを解決したいと思っています。
気が向いたらguraさんの回答とお礼欄の内容について、ご教示ください。

通報する
お礼日時：2024/03/31 21:25

No.8

  • 回答者： ssawatake
  • 回答日時：

No.6続き



ザックリと緊急対処法を

①htmlのheadに以下1行追加
<meta name="viewport" content="width=device-width, initial-scale=1" />

②現在のcssに以下を追加
td {overflow: hidden; white-space: nowrap;max-width: 1000px;}

@media screen and (max-width: 640px) {
td {overflow: hidden; white-space: nowrap;max-width: 200px;}
}

説明
1000pxと言うのはpcでのカット対象幅（適宜変更して下さい）
200pxはスマホでのカット対象幅（適宜変更して下さい）

640pxはブラウザで有る事を認識するマックス幅（適宜変更して下さい）
640px以下はスマホと認識。
    • good
    • 0
    • 件
通報する
この回答へのお礼

ありがとうございます。
良く分からないのですが、trにdisplay: flexとmax-width: 100vwを設定する事で、設定を2通り用意する事なく、自動伸縮するテーブルが出来上がり、気に入りました。
しかしdisplay: flexを使うと、なぜかborder-collapseが無効になってしまい、微妙に気になります。
table { border-collapse: collapse }と、tr { display: flex }は同時に使えないのでしょうか。

通報する
お礼日時：2024/03/31 21:49

No.9

  • 回答者： gura_
  • 回答日時：

zyousuke さん


　････ただしdisplay: flexとするとborder-collapseが無効化されるようで、･････

table 特有のレイアウトの機能を殺しても border-collapse は機能させろと「虫」の良いことを言っても、「無視」されますね。

その時は無茶や我儘は言わずに、collapse の機能を自ら組み込めばよいでしょう。↓

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<style>
tr{ display: flex; max-width: 70vw; border: solid 1px; } /* tr の border 付加 */
tr:nth-child(n+2){ border-top: 0px; } /* 2番以降の border-top 除去 */
td { white-space: nowrap; overflow: hidden; }
td { flex: 2; border-right: solid 1px; } /* セルの右にボーダー */
td:first-child { flex: 1; }
td:last-child { flex: 3; border-right: 0px; } /* 最終セルの右にボーダー無し */
</style>
</head>
<body>
<table>
<tr>
<td>あいうえお</td>
<td>かきくけこさしすせそたちつてと</td>
<td>abcdefg hijklmnopqrstuvwxyz</td>
<td>なにぬねの はひふへほまみむめも　やいゆえよらりるれろわいうえを</td>
</tr>
<tr>
<td>かきくけこさしすせそたちつてと</td>
<td>あいうえお</td>
<td>abcdefg hijklmnopqrstuvwxyz</td>
<td>なにぬねの はひふへほまみむめも　やいゆえよらりるれろわいうえを</td>
</tr>
<tr>
<td>abcdefg hijklmnopqrstuvwxyz</td>
<td>なにぬねの はひふへほまみむめも　やいゆえよらりるれろわいうえを</td>
<td>あいうえお</td>
<td>かきくけこさしすせそたちつてと</td>
</tr>
</table>
</body>
</html>
    • good
    • 0
    • 件
通報する
この回答へのお礼

ありがとうございます。
display: flexはテーブルの機能を殺す設定なのですね。
しかしborder-collapseに頼らなくても、罫線の表示を手動で細かく調整すれば、同じ見た目に出来るのですね。
ところで前のお礼の時には気付かなかったのですが、改めて確認してみると、また、また1つ腑に落ちない点を見つけました。
それはmax-widthの仕様についてです。
width: 100vwにするとテーブル幅が画面いっぱいに広がります。
ですから私は、これの応用でmax-width: 100vwにすれば、データ長に応じてテーブル幅が自動的に伸縮すると思い込んでいたのです。
しかし、実際に長いデータを入れてみたらテーブル幅は画面の60%ぐらいまでしか伸びませんでした。
max-width: 200vwとしても、やはり画面の60%ぐらいにしかなりません。
max-widthの使い方を間違えているのでしょうか。
この事について解説をお願いします。
m(__)m

通報する
お礼日時：2024/04/01 08:17

No.10

  • 回答者： ssawatake
  • 回答日時：

>>display: flexを使うと、なぜかborder-collapseが無効になってしまい、



何処の枠間が無効になると言ってます？
border-collapse: collapseをtable全体に設定してるので、table枠とtr枠のスペースが無くなる筈ですが・・・。
    • good
    • 0
    • 件
通報する
この回答へのお礼

border-collapseを設定すると、各セルの線が重なって1本になるはずですが、display: flexも同時に設定すると、各セルの線はくっつくだけで重なりません。例えばborder-width: 1pxとしている場合には、となり同士の線がくっついて線幅が2pxとなり、これが微妙に気になるのです。
ただしdisplay: flexはいわばテーブルの機能を殺す設定ですので、この挙動はごく真っ当な物だそうで、どうしても線を重ねたいなら、手動で上下(および左右)どちらか1本だけ線を表示する設定にして対応するしかないそうです。
そして、この件については私も納得したところです。
しかし新たな疑問としてNo.9guraさんの所にも書いたのですが、max-widthの挙動が意図した通りにならない件を挙げさせていただきました。
guraさんのコードは、テーブル幅を画面の70%にして、各セルでは1行で表示しきれない部分は非表示にするという物だと思うのですが、実際にこのコードをブラウザーで読み込んで各セルを見てみると、全てのデータを表示しきれていないセルがあるにも関わらず、テーブル幅が50%ちょいぐらいにしか伸びていません。
さらにmax-width: 100vwとしてもテーブル幅はそれ以上伸びず、
この事からmax-widthの正しい使い方について解説を求めたところです。
ですからmax-widthの正しい使い方について、よろしければ先生の解説もお願いします。
m(__)m

通報する
お礼日時：2024/04/01 17:44

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

このQ&Aを見た人はこんなQ&Aも見ています

関連するカテゴリからQ&Aを探す

ページトップページトップ

Q質問する（無料）

このQ&Aを見た人がよく見るQ&A

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報