詳しい人求む！

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

解決済

質問者：zyousuke
質問日時：2024/03/31 05:19
回答数：15件

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

通報する

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

質問の本文を隠す

回答 (15件中11～15件)

ベストアンサー優先
最新から表示
回答順に表示

No.5

回答者： gura_
回答日時：2024/03/31 13:43

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

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

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

- 0
- 件

通報する

この回答へのお礼

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

通報する

お礼日時：2024/03/31 20:52

No.4

回答者： ssawatake
回答日時：2024/03/31 11:25

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

td {
overflow: hidden;
white-space: nowrap;
max-width: 200px;←←←←セルサイズを書く
}

- 0
- 件

通報する

この回答へのお礼

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

通報する

お礼日時：2024/03/31 12:06

No.3

回答者： gura_
回答日時：2024/03/31 11:11

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>

- 0
- 件

通報する

この回答へのお礼

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

通報する

お礼日時：2024/03/31 11:38

No.2

回答者： satoumasaru
回答日時：2024/03/31 07:41

No1です。

すみません、私の勘違いです。
回答を撤回させて頂きます。
申し訳ありませんでした。

- 0
- 件

通報する

この回答へのお礼

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

通報する

お礼日時：2024/03/31 07:48

No.1

回答者： satoumasaru
回答日時：2024/03/31 07:07

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

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

何もデータがなければ空白のデータをいれてください。

- 0
- 件

通報する

この回答へのお礼

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

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

通報する

お礼日時：2024/03/31 07:33