50
42

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

テーブル内で長い文字列を決まった長さで改行させる方法

Last updated at Posted at 2016-08-18

テーブルの中に長い文字列が入る可能性があり、
テーブルセルの決まった長さで折り返し(改行)させたいときの対処法です

①テーブルセル幅を固定する設定

<table ~~~ style="table-layout:fixed;width:100%;">

これで幅が固定できます

②テーブルセル幅を設定

固定する設定ができていても、その長さが決まってないといけない、ってわけです
colgroupタグとcolタグでやってもらいましょう

<table ~~~ style="table-layout:fixed;width:100%;">
	<colgroup>
		<col style="width:33%;">
		<col style="width:33%;">
		<col style="width:33%;">
	</colgroup>
	<tbody>
		<tr><td>hey</td><td>hey</td><td>hey</td></tr>
		<tr><td>hey</td><td>hey</td><td>hey</td></tr>
		<tr><td>hey</td><td>hey</td><td>hey</td></tr>
	</tbody>
</table>

BootstrapなんかのCSSライブラリを使ってる場合はすでにできている可能性がありますね
こんな風に↓

<th class="col-xs-2">aaaaa</th>
<th class="col-xs-3">bbbbb</th>
<th class="col-xs-3">ccccc</th>
<th class="col-xs-2">ddddd</th>
<th class="col-xs-2">eeeee</th>

Bootstrapといえばグリッドシステムつかいますよね

③改行させる設定

さていよいよ本命の作業

<td ~~~ style="word-wrap:break-word;"></td>

これだけ。

以上テーブルでうまく改行させる方法でした。

50
42
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
50
42

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?