bootstrapにてデザインを指定しているのですが

    <div class="container">
     <div class="row">
      <table class="table">
        <thead>
           <tr>TR</tr>
        </thead>

        <tbody>
          <tr>
             <td>TD1</td>
             <td>アイディ</td>
          </tr>
         
          <tr>
             <td>TD2</td>
             <td>http://awawsawas.dwdasdsaddwadwdnaifjnekfrdnkjgbnfkdfnanfiergkvmseingvkrnbkfbksnvirbnkfb kdjrnkjvnbrkbndrkbjnkrjbnkdnrjbnjnjrnrjnrjrjrrnrnnrjjrjrnrjnkgjrnkdnvjfnrfbkjnfkdjbnrkjdnfjknbkjdndjfkbnkdfjkdbnfkbndkfbnkdfnbjkfdnbkdnbkfnbkdjbfnkjbfdbnfkjnbkjfdnbjfkdnbfjdknbfjnbkjfdbnkdfnbkdnbjdkfbnkjnbkjdnkrbdnfkbndknbfjknbkdnbfknbkdjbndfknbkfnbjkfndkvmrkmglbnkdnbkfnkbnfknbdknbkfnbdbnfjkdnbdfknbknfdknbkfnbfkdjbnfdknbfdjnbfknbkdnbfkjbfnkfnkdnb</td>
          </tr>

        </tbody>
      </table>
     </div>
    </div>

上記のように記述し実際に表示した場合、2つ目の<tr>である要素の
URLのような長文がセットされていると横にズラーっと長くなってウィンドウのサイズを超えてしまい横にスクロールすることでしか全文をみることができません。

そこで長文が<td>に入力されていても、画面サイズに合わせて改行をさせたいのですが、どのようにすればよろしいか検討つきません。

お分かりになるかたいらっしゃればご教授お願いします。

行動規範の内容に同意します

回答3件

ベストアンサー

このようにするとどうでしょう。

HTML
1<!DOCTYPE html>
2<html>
3<head>
4    <meta charset="UTF-8">
5    <title>タイトル</title>
6    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
7    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">
8    <style type="text/css">
9        .table {
10            table-layout: fixed;
11            overflow-wrap: break-word;
12            word-wrap: break-word;
13        }
14    </style>
15</head>
16<body>
17<div class="container">
18    <div class="row">
19        <table class="table">
20            <thead>
21            <tr>
22                <th>TR</th>
23                <th>TR</th>
24            </tr>
25            </thead>
26            <tbody>
27            <tr>
28                <td>TD1</td>
29                <td>アイディ</td>
30            </tr>
31            <tr>
32                <td>TD2</td>
33                <td>http://awawsawas.dwdasdsaddwadwdnaifjnekfrdnkjgbnfkdfnanfiergkvmseingvkrnbkfbksnvirbnkfb
34                    kdjrnkjvnbrkbndrkbjnkrjbnkdnrjbnjnjrnrjnrjrjrrnrnnrjjrjrnrjnkgjrnkdnvjfnrfbkjnfkdjbnrkjdnfjknbkjdndjfkbnkdfjkdbnfkbndkfbnkdfnbjkfdnbkdnbkfnbkdjbfnkjbfdbnfkjnbkjfdnbjfkdnbfjdknbfjnbkjfdbnkdfnbkdnbjdkfbnkjnbkjdnkrbdnfkbndknbfjknbkdnbfknbkdjbndfknbkfnbjkfndkvmrkmglbnkdnbkfnkbnfknbdknbkfnbdbnfjkdnbdfknbknfdknbkfnbfkdjbnfdknbfdjnbfknbkdnbfkjbfnkfnkdnb
35                </td>
36            </tr>
37            </tbody>
38        </table>
39    </div>
40</div>
41<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
42</body>
43</html>

追記

HTML
1<!DOCTYPE html>
2<html>
3<head>
4    <meta charset="UTF-8">
5    <title>タイトル</title>
6    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
7    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">
8    <style type="text/css">
9        .table {
10            table-layout: fixed;
11            overflow-wrap: break-word;
12            word-wrap: break-word;
13        }
14
15        .table tr th:nth-child(1) {
16            width: 30%;
17        }
18    </style>
19</head>
20<body>
21<div class="container">
22    <div class="row">
23        <table class="table">
24            <thead>
25            <tr>
26                <th>TR</th>
27                <th>TR</th>
28            </tr>
29            </thead>
30            <tbody>
31            <tr>
32                <td>TD1</td>
33                <td>アイディ</td>
34            </tr>
35            <tr>
36                <td>TD2</td>
37                <td>http://awawsawas.dwdasdsaddwadwdnaifjnekfrdnkjgbnfkdfnanfiergkvmseingvkrnbkfbksnvirbnkfb
38                    kdjrnkjvnbrkbndrkbjnkrjbnkdnrjbnjnjrnrjnrjrjrrnrnnrjjrjrnrjnkgjrnkdnvjfnrfbkjnfkdjbnrkjdnfjknbkjdndjfkbnkdfjkdbnfkbndkfbnkdfnbjkfdnbkdnbkfnbkdjbfnkjbfdbnfkjnbkjfdnbjfkdnbfjdknbfjnbkjfdbnkdfnbkdnbjdkfbnkjnbkjdnkrbdnfkbndknbfjknbkdnbfknbkdjbndfknbkfnbjkfndkvmrkmglbnkdnbkfnkbnfknbdknbkfnbdbnfjkdnbdfknbknfdknbkfnbfkdjbnfdknbfdjnbfknbkdnbfkjbfnkfnkdnb
39                </td>
40            </tr>
41            </tbody>
42        </table>
43    </div>
44</div>
45<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
46</body>
47</html>

投稿2017/03/10 04:14

編集2017/03/10 07:15

s8_chu

総合スコア14731

68H_

2017/03/10 04:30

ありがとうございます！ただ、左側で表示される部分が広すぎるのですが、 3:7位の比率で表示はできますでしょうか？

s8_chu

2017/03/10 04:37

追記したように行うとどうでしょうか？

68H_

2017/03/10 06:58

追記通り記述してみましたがやはり5:5のままでした

s8_chu

2017/03/10 07:19

こちらでは5:5では表示されていないのですが、一度キャッシュの消去(http://portal.tac-school.co.jp/faq_system/?id=38)を試してみていただけませんか？私のブラウザでの表示は追記した画像のようになっています。また、違うブラウザから試してみると解決するかもしれません。

68H_

2017/03/10 13:18

申し訳ありませんこちらの手違いでうまく機能していなかったようです。ありがとうございます、上述の通りでうまくいきました！ありがとうございました！

行動規範の内容に同意します

もう1案。
今回の例だけであれば.table>tbody>tr>td:nth-child(2) {...}でもいけますが、この以外にほかの場面でも使用しやすいようにclassを用意して指定します。

css
1.overflow-wrap-break {
2	overflow-wrap: break-word;
3}

html
1<table class="table">
2	<thead>
3		<tr>
4			<th colspan="2">TR</th>
5		</tr>
6	</thead>
7	<tbody>
8		<tr>
9			<td>TD1</td>
10			<td class="overflow-wrap-break">アイディ</td>
11		</tr>
12		<tr>
13			<td>TD2</td>
14			<td class="overflow-wrap-break">http://awawsawas.dwdasdsaddwadwdnaifjnekfrdnkjgbnfkdfnanfiergkvmseingvkrnbkfbksnvirbnkfb kdjrnkjvnbrkbndrkbjnkrjbnkdnrjbnjnjrnrjnrjrjrrnrnnrjjrjrnrjnkgjrnkdnvjfnrfbkjnfkdjbnrkjdnfjknbkjdndjfkbnkdfjkdbnfkbndkfbnkdfnbjkfdnbkdnbkfnbkdjbfnkjbfdbnfkjnbkjfdnbjfkdnbfjdknbfjnbkjfdbnkdfnbkdnbjdkfbnkjnbkjdnkrbdnfkbndknbfjknbkdnbfknbkdjbndfknbkfnbjkfndkvmrkmglbnkdnbkfnkbnfknbdknbkfnbdbnfjkdnbdfknbknfdknbkfnbfkdjbnfdknbfdjnbfknbkdnbfkjbfnkfnkdnb</td>
15		</tr>
16	</tbody>
17</table>

###追記
ブラウザですかね。
古い表記も合わせて指定してみます。

css
1.overflow-wrap-break {
2    overflow-wrap: break-word;
3    word-wrap: break-word;
4}

投稿2017/03/10 04:29

編集2017/03/10 07:24

gin

総合スコア2722

68H_

2017/03/10 07:01

ありがとうございます、ご指摘通り記述してみましたが改行されませんでした。

行動規範の内容に同意します

trかtdにbootstrapのclassを割り当てて幅を確定してしまえば解決しそうな気はします。

<td class="col-xs-3">http://awawsawas.dwdasdsaddwadwdnaifjnekfrdnkjgbnfkdfnanfiergkvmseingvkrnbkfbksnvirbnkfb kdjrnkjvnbrkbndrkbjnkrjbnkdnrjbnjnjrnrjnrjrjrrnrnnrjjrjrnrjnkgjrnkdnvjfnrfbkjnfkdjbnrkjdnfjknbkjdndjfkbnkdfjkdbnfkbndkfbnkdfnbjkfdnbkdnbkfnbkdjbfnkjbfdbnfkjnbkjfdnbjfkdnbfjdknbfjnbkjfdbnkdfnbkdnbjdkfbnkjnbkjdnkrbdnfkbndknbfjknbkdnbfknbkdjbndfknbkfnbjkfndkvmrkmglbnkdnbkfnkbnfknbdknbkfnbdbnfjkdnbdfknbknfdknbkfnbfkdjbnfdknbfdjnbfknbkdnbfkjbfnkfnkdnb</td>

こんな風に。どうでしょう。