電子書籍の厳選無料作品が豊富！

詳しい人求む！

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

解決済

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

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

通報する

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

質問の本文を隠す

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

No.15ベストアンサー

  • 回答者： sukitaro
  • 回答日時：

div要素を入れてもよければ、こんな方法もあります。



<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<style>
table{border-collapse: collapse;}
td {border: 1px solid;}
td > div {
line-height:1.5em;
height:1.5em;
overflow-wrap: break-word;
word-break: break-all;
overflow-y: hidden;
}
</style>
</head>
<body>
<table>
<tr>
<td><div>あいうえお</div></td>
<td><div>かきくけこさしすせそたちつてと</div></td>
<td><div>abcdefg hijklmnopqrstuvwxyz</div></td>
<td><div>なにぬねの はひふへほまみむめも　やいゆえよらりるれろわいうえを</div></td>
</tr>
<tr>
<td><div>あいうえお</div></td>
<td><div>かきくけこさしすせそたちつてと</div></td>
<td><div>abcdefg hijklmnopqrstuvwxyz</div></td>
<td><div>なにぬねの はひふへほまみむめも　やいゆえよらりるれろわいうえを</div></td>
</tr>
</table>
</body>
</html>
    • good
    • 0
    • 件
通報する
この回答へのお礼

ありがとうございます。
tdの中にブロックレベル要素を突っ込んで、その高さを固定するという巧妙な書き方ですが、文法的には何ら問題ないようで、すばらしいです
＼(^o^)／

この書き方ならdisplay: flexも不要ですし、何よりスクリプトを使わずに済むので、先生自身が指摘されたcssだけでは難しいという難題を、これまた自らクリアーされました。

通報する
お礼日時：2024/04/02 21:01

No.14

  • 回答者： sukitaro
  • 回答日時：

cssだけでは難しいと思います。



<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<style>
table{border-collapse: collapse;}
td { white-space: nowrap; overflow: hidden; border:1px solid;}
</style>
<script>
'use strict';
window.addEventListener('DOMContentLoaded', ()=>{
const tds = [...window.table.querySelectorAll('td')];
const tdsWidthRatio = tds.map(td => td.clientWidth / window.table.clientWidth * .9);
const ro = new ResizeObserver(entries => {
tds.forEach((td, idx) => {
td.style.maxWidth = `${(entries[0].contentBoxSize[0].inlineSize * tdsWidthRatio[idx]) | 0}px`;
})
});
ro.observe(document.body);
}, false);
</script>
</head>
<body>
<table id="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>
</table>
</body>
</html>
    • good
    • 0
    • 件
通報する
この回答へのお礼

ありがとうございます。
私も最初は簡単に考えていたのですが、だんだん無理と思い始めました。
ご紹介のコード中、テーブルに対する各セル幅の割合を計算する時に0.9を掛けるのは、テーブル幅が画面を飛び越えないようにする配慮と思われますが、
私は画面の9割しか活用できない事がどうしても気になり、色々試したのですが、ぴったり100%にはならず、スクロールバーが出てしまいます。スクロールバーを出さないためには98%ぐらいの画面使用率で妥協するか。
より軽量なcssのみの実装で我慢するか。
といった所でしょうか。
うーん。。。

通報する
お礼日時：2024/04/02 17:43

No.13

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

dispaly:flex;使うのやめたら如何ですか。


また罫線をエクセルの様に細くする事は一発では出来ず、table全体の背景を黒にし、セルの背景を白にする様な事をしないと出来ません。

両方を満たすcssを参考までに下記します。

table {
width:80vw;
background-color:#000;
border-collapse:separate;
border-spacing:1px;}

td {
background-color: #ffffff;
white-space: nowrap;
overflow: hidden;
max-width: 40vw;
}
    • good
    • 0
    • 件
通報する
この回答へのお礼

ありがとうございます。
border-collapseの代わりに前景と背景の色を逆転させて、セルの間隔を狭めて、細い線があるように見せかけるのですね。巧妙な書き方ですが、左右(上下)一方のみ線を表示する設定よりも書式は簡単だと思いました。

通報する
お礼日時：2024/04/02 14:11

No.12

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

そもそもなんですが、dispaly:flex;は親要素の下の子要素を横並びとか、縦並びにする為のものです。


一方、tableタグは既にそうなってます。
dispaly:flex;は要らないのでは？

max-widthはtbodyやtrには効きません。
また、inline要素に対してもmax-widthは効きません。
tdに対してmax-widhを指定すればよいのでは？
    • good
    • 0
    • 件
通報する
この回答へのお礼

ありがとうございます。
dispaly:flexはテーブルのレイアウト機能を殺してしまうので、私も使っていて気持ち悪い感じがします。
しかしながら、なぜかtrにdispaly:flexとmax-widthを両方設定した時だけ、当初の私の要望(つまり1行で表示しきれないセルデータ部分は非表示にする)が実現できるので、あえてdisplay: flexを使うようにしたという経緯です。

max-widthはtrには効かないのですね(x_x)
しかしながら、実際にはtrにmax-widthを設定するとブラウザウィンドウの幅が一定の範囲を超えるまでは、意図した通りに動くので、完全にはサポートされていないが、一定条件下では効くといった所でしょうか。

ご提案どおりtdに対してmax-widhを指定すればうまくいくと思います。
しかし、そのためには、max-widthが合計で100vwとなるように、各tdに設定すべきmax-width値を決める必要があり、そのためには各tdのデータ長を計測しないといけませんので、最後の手段にしようと思いました。

通報する
お礼日時：2024/04/02 14:00

No.11

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

>>max-width: 100vwとしてもテーブル幅はそれ以上伸びず、



それは変です。
試しにやってみましたが、チャント挙動します。

貴方のソース及び、何（PC？スマホ？）と使ってるブラウザを明記すれば、回答が付くと思います。
    • good
    • 0
    • 件
通報する
この回答へのお礼

お手数おかけします。
環境によって再現性が異なるという事で、いくつか環境を変えて調査しました。
そしたらブラウザウィンドウの横幅の長さによって、症状が発生したりしなかったりする事が分かりました。
先のコードの場合にはブラウザウィンドウの横幅が1024ピクセルぐらいまでなら、問題なくテーブル幅が自動的に伸び縮みするのですが、ブラウザウィンドウの横幅をドラッグしてもっと大きく(たとえば1280ピクセルぐらいに)しても、テーブルの横幅はそれ以上伸びず、セル内の文字を全部表示する事はできませんでした。

そこで、もっと簡単にこの症状を再現させるため、また原因を探しやすくするために、必要最小限のコードを書きおろしました。
<!DOCTYPE html><html lang="ja">
<head>
<title></title>
<meta name="viewport" content="width=device-width">
<style>
tr { display: flex; max-width: 100vw }
td {
border: 1px solid;
white-space: nowrap;
overflow: hidden;
flex: 1
}
</style>
</head>
<body>
<table>
<tr><td>あいうえ</td><td>お</td></tr>
<tr><td>か</td><td>きくけこ</td></tr>
</table>
</body>
</html>

このコードをブラウザーで読み込むと、最初のセルに表示されるはずの「あいうえ」という文字列が「あいう」までしか表示されません。
PCでもスマホでも再現すると思います。
今一度試していただけると嬉しいです。

通報する
お礼日時：2024/04/01 22:47

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

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.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.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.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

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

Q質問する（無料）

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

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

おすすめ情報

Q質問する（無料）

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

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

おすすめ情報