Q&A
###前提・実現したいこと
現状のコードを掲載致します。
<table> <thead> <tr> <th> id </th> <th> name </th> <th> display_name </th> <th> profile </th> <th> mail_address </th> </tr> </thead> <tbody> <tr> <td> 1 </td> <td> test </td> <td> test </td> <td> test </td> <td> test </td> </tr> <tr> <td> 2 </td> <td> test </td> <td> test </td> <td> test </td> <td> test </td> </tr> <tr> <td> 3 </td> <td> test </td> <td> test </td> <td> test </td> <td> test </td> </tr> <tr> <td> 4 </td> <td> test </td> <td> test </td> <td> test </td> <td> test </td> </tr> </tbody> </table>
td { border: 1px solid black; box-sizing: border-box; width: 20%; }
###発生している問題・エラーメッセージ
これでは、列が増えたとき、追加で追加した列が少し狭くなってしまうことに気ずきました
<table> <thead> <tr> <th> id </th> <th> name </th> <th> display_name </th> <th> profile </th> <th> mail_address </th> <th> test </th> </tr> </thead> <tbody> <tr> <td> 1 </td> <td> test </td> <td> test </td> <td> test </td> <td> test </td> <td> test </td> </tr> <tr> <td> 2 </td> <td> test </td> <td> test </td> <td> test </td> <td> test </td> <td> test </td> </tr> <tr> <td> 3 </td> <td> test </td> <td> test </td> <td> test </td> <td> test </td> <td> test </td> </tr> <tr> <td> 4 </td> <td> test </td> <td> test </td> <td> test </td> <td> test </td> <td> test </td> </tr> </tbody> </table>
装飾には以前掲載したものと同じコードを用いております。
###該当のソースコード
掲載済み
###試したこと
どうすれば列が追加されても幅を固定にできるのか、皆目見当も付かず、少しpxをかえるなどしかできませんでした・・・
###補足情報(言語/FW/ツール等のバージョンなど)
より詳細な情報
回答1件
0
ベストアンサー
table-layoutプロパティを使用することで質問者さんが想像するような動作を実現できるかと思いますが、いかがでしょうか？
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <title>タイトル</title> 6 <style type="text/css"> 7 table { 8 width: 100%; 9 table-layout: fixed; 10 } 11 12 th, td { 13 overflow-wrap: break-word; 14 } 15 16 td { 17 box-sizing: border-box; 18 border: 1px solid black; 19 } 20 </style> 21</head> 22<body> 23<table> 24 <thead> 25 <tr> 26 <th>id</th> 27 <th>name</th> 28 <th>display_name</th> 29 <th>profile</th> 30 <th>mail_address</th> 31 <th>test</th> 32 </tr> 33 </thead> 34 <tbody> 35 <tr> 36 <td>1</td> 37 <td>test</td> 38 <td>test</td> 39 <td>test</td> 40 <td>test</td> 41 <td>test</td> 42 </tr> 43 <tr> 44 <td>2</td> 45 <td>test</td> 46 <td>test</td> 47 <td>test</td> 48 <td>test</td> 49 <td>test</td> 50 </tr> 51 <tr> 52 <td>3</td> 53 <td>test</td> 54 <td>test</td> 55 <td>test</td> 56 <td>test</td> 57 <td>test</td> 58 </tr> 59 <tr> 60 <td>4</td> 61 <td>test</td> 62 <td>test</td> 63 <td>test</td> 64 <td>test</td> 65 <td>test</td> 66 </tr> 67 </tbody> 68</table> 69</body> 70</html>
追記
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <title>タイトル</title> 6 <style type="text/css"> 7 table { 8 width: 100%; 9 table-layout: fixed; 10 } 11 12 th, td { 13 overflow-x: auto; /* 変更 */ 14 } 15 16 td { 17 box-sizing: border-box; 18 border: 1px solid black; 19 } 20 </style> 21</head> 22<body> 23<table> 24 <thead> 25 <tr> 26 <th>id</th> 27 <th>name</th> 28 <th>display_name</th> 29 <th>profile</th> 30 <th>mail_address</th> 31 <th>test</th> 32 </tr> 33 </thead> 34 <tbody> 35 <tr> 36 <td>1</td> 37 <td>test</td> 38 <td>test</td> 39 <td>test</td> 40 <td>test</td> 41 <td>test</td> 42 </tr> 43 <tr> 44 <td>2</td> 45 <td>test</td> 46 <td>test</td> 47 <td>test</td> 48 <td>test</td> 49 <td>test</td> 50 </tr> 51 <tr> 52 <td>3</td> 53 <td>test</td> 54 <td>test</td> 55 <td>test</td> 56 <td>test</td> 57 <td>test</td> 58 </tr> 59 <tr> 60 <td>4</td> 61 <td>test</td> 62 <td>test</td> 63 <td>test</td> 64 <td>test</td> 65 <td>test</td> 66 </tr> 67 </tbody> 68</table> 69</body> 70</html>
投稿2017/11/19 17:02
編集2017/11/19 17:32
総合スコア14731
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/11/19 17:24
2017/11/19 17:32 編集
2017/11/19 17:37