teratail header banner
teratail header banner
質問するログイン新規登録

回答編集履歴

7

コードの修正

2019/12/28 13:28

投稿

take-t.t.
take-t.t.

スコア360

answer CHANGED
@@ -5,18 +5,22 @@
5
5
  以下は飽くまで一例です。
6
6
  ```html
7
7
  <table class="list">
8
- <tr>
9
- <th class="list__item1">item1</th>
10
- <th class="list__item2">item2</th>
11
- <th class="list__item3">item3</th>
12
- <th class="list__item4">item4</th>
13
- </tr>
14
- <tr>
15
- <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo delectus eveniet eligendi. Nam a quis culpa sed deserunt perspiciatis repellendus vitae, vero accusantium. Quia laboriosam architecto, possimus, assumenda corporis nemo.</td>
16
- <td>hogehoge</td>
17
- <td>fugafuga</td>
18
- <td>foobar</td>
19
- </tr>
8
+ <thead>
9
+ <tr>
10
+ <th class="list__item1">item1</th>
11
+ <th class="list__item2">item2</th>
12
+ <th class="list__item3">item3</th>
13
+ <th class="list__item4">item4</th>
14
+ </tr>
15
+ </thead>
16
+ <tbody>
17
+ <tr>
18
+ <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo delectus eveniet eligendi. Nam a quis culpa sed deserunt perspiciatis repellendus vitae, vero accusantium. Quia laboriosam architecto, possimus, assumenda corporis nemo.</td>
19
+ <td>hogehoge</td>
20
+ <td>fugafuga</td>
21
+ <td>foobar</td>
22
+ </tr>
23
+ </tbody>
20
24
  </table>
21
25
  ```
22
26
  ```css
@@ -48,4 +52,4 @@
48
52
  padding: 1rem 0;
49
53
  }
50
54
  ```
51
- 動作デモ → [https://jsfiddle.net/0pgwfj2x/](https://jsfiddle.net/0pgwfj2x/)
55
+ 動作デモ → [https://jsfiddle.net/v9qbfpez/](https://jsfiddle.net/v9qbfpez/)

6

表現を変更

2019/12/28 13:28

投稿

take-t.t.
take-t.t.

スコア360

answer CHANGED
@@ -1,7 +1,51 @@
1
- `table`に`table-layout: fixed`を指定し、各`th`の`width`を相対値で指定してやれば良いと思います。
1
+ `table`に`table-layout: fixed`を指定し、****`th`の`width`を相対値で指定してやれば良いと思います。
2
- それで`td`に`text-overflow: ellipsis`あたりを指定してやるとより見やすくなるのではないでしょうか。
2
+ それで`td`に`white-space: nowrap`・`overflow: hidden`・`text-overflow: ellipsis`あたりを指定してやるとより見やすくなるのではないでしょうか。
3
3
 
4
- 動作デモ → [https://jsfiddle.net/0pgwfj2x/](https://jsfiddle.net/0pgwfj2x/)
5
4
 
6
- **追記:**
7
- 文字の折り返しを制限する`white-space: nowrap`とハミ出し部分を表示しない`overflow: hidden`を追加してみて下さい。
5
+ 以下は飽くまで一例です。
6
+ ```html
7
+ <table class="list">
8
+ <tr>
9
+ <th class="list__item1">item1</th>
10
+ <th class="list__item2">item2</th>
11
+ <th class="list__item3">item3</th>
12
+ <th class="list__item4">item4</th>
13
+ </tr>
14
+ <tr>
15
+ <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo delectus eveniet eligendi. Nam a quis culpa sed deserunt perspiciatis repellendus vitae, vero accusantium. Quia laboriosam architecto, possimus, assumenda corporis nemo.</td>
16
+ <td>hogehoge</td>
17
+ <td>fugafuga</td>
18
+ <td>foobar</td>
19
+ </tr>
20
+ </table>
21
+ ```
22
+ ```css
23
+ .list {
24
+ width: 100%;
25
+ text-align: center;
26
+ border-collapse: collapse;
27
+ table-layout: fixed;
28
+ }
29
+ .list__item1 {
30
+ width: 40%;
31
+ }
32
+ .list__item2 {
33
+ width: 25%;
34
+ }
35
+ .list__item3 {
36
+ width: 20%;
37
+ }
38
+ .list__item4 {
39
+ width: 15%;
40
+ }
41
+ tr {
42
+ border-bottom: solid 1px #000;
43
+ }
44
+ td {
45
+ white-space: nowrap;
46
+ overflow: hidden;
47
+ text-overflow: ellipsis;
48
+ padding: 1rem 0;
49
+ }
50
+ ```
51
+ 動作デモ → [https://jsfiddle.net/0pgwfj2x/](https://jsfiddle.net/0pgwfj2x/)

5

誤字を修正

2019/12/28 13:19

投稿

take-t.t.
take-t.t.

スコア360

answer CHANGED
@@ -4,4 +4,4 @@
4
4
  動作デモ → [https://jsfiddle.net/0pgwfj2x/](https://jsfiddle.net/0pgwfj2x/)
5
5
 
6
6
  **追記:**
7
- 文字の折り返しを制限する`white-space: nowrap`とハミ出し部分を表示しない`over-flow: hidden`を追加してみて下さい。
7
+ 文字の折り返しを制限する`white-space: nowrap`とハミ出し部分を表示しない`overflow: hidden`を追加してみて下さい。

4

より分かりやすい表現を追記

2019/12/28 13:10

投稿

take-t.t.
take-t.t.

スコア360

answer CHANGED
@@ -1,6 +1,7 @@
1
1
  `table`に`table-layout: fixed`を指定し、各`th`の`width`を相対値で指定してやれば良いと思います。
2
2
  それで`td`に`text-overflow: ellipsis`あたりを指定してやるとより見やすくなるのではないでしょうか。
3
3
 
4
- 飽くまで一例ですが、加えて文字サイズをリンク先の様に指定してやることで、`table`の伸縮により文字サイズが変化するのでよりレスポンシブな挙になると思います。
4
+ 作デモ → [https://jsfiddle.net/0pgwfj2x/](https://jsfiddle.net/0pgwfj2x/)
5
5
 
6
+ **追記:**
6
- 動作デモ → [https://jsfiddle.net/0pgwfj2x/](https://jsfiddle.net/0pgwfj2x/)
7
+ 文字の折り返しを制限する`white-space: nowrap`とハミ出し部分を表示しない`over-flow: hidden`を追加してみて下さい。

3

コードの整理・修正

2019/12/28 13:09

投稿

take-t.t.
take-t.t.

スコア360

answer CHANGED
@@ -1,4 +1,6 @@
1
1
  `table`に`table-layout: fixed`を指定し、各`th`の`width`を相対値で指定してやれば良いと思います。
2
- それで`td`に`text-overflow: ellipsis`あたりを指定してやると見やすくなるのではないでしょうか。
2
+ それで`td`に`text-overflow: ellipsis`あたりを指定してやるとより見やすくなるのではないでしょうか。
3
3
 
4
+ 飽くまで一例ですが、加えて文字サイズをリンク先の様に指定してやることで、`table`の伸縮により文字サイズが変化するのでよりレスポンシブな挙動になると思います。
5
+
4
- 動作デモ → [https://jsfiddle.net/h6oxb2qL/](https://jsfiddle.net/h6oxb2qL/)
6
+ 動作デモ → [https://jsfiddle.net/0pgwfj2x/](https://jsfiddle.net/0pgwfj2x/)

2

scssをcssに変更

2019/12/28 13:06

投稿

take-t.t.
take-t.t.

スコア360

answer CHANGED
@@ -1,4 +1,4 @@
1
- `table`に`table-layout: fixed`を指定し、各`th`の`width`を相対値で指定、又はメディアクエリを設定してやれば良いと思います。
1
+ `table`に`table-layout: fixed`を指定し、各`th`の`width`を相対値で指定してやれば良いと思います。
2
2
  それで`td`に`text-overflow: ellipsis`あたりを指定してやると見やすくなるのではないでしょうか。
3
3
 
4
- 動作デモ → [https://jsfiddle.net/2hj7n84f/](https://jsfiddle.net/2hj7n84f/)
4
+ 動作デモ → [https://jsfiddle.net/h6oxb2qL/](https://jsfiddle.net/h6oxb2qL/)

1

動作デモを追加

2019/12/28 10:44

投稿

take-t.t.
take-t.t.

スコア360

answer CHANGED
@@ -1,2 +1,4 @@
1
1
  `table`に`table-layout: fixed`を指定し、各`th`の`width`を相対値で指定、又はメディアクエリを設定してやれば良いと思います。
2
- それで`td`に`text-overflow: ellipsis`あたりを指定してやると見やすくなるのではないでしょうか。
2
+ それで`td`に`text-overflow: ellipsis`あたりを指定してやると見やすくなるのではないでしょうか。
3
+
4
+ 動作デモ → [https://jsfiddle.net/2hj7n84f/](https://jsfiddle.net/2hj7n84f/)