tableのthの大きさをresponsiveかつ固定したいです！

下記のテーブルは投稿された内容によって<th>の部分の大きさが変わってしまいます。
例えば投稿したURLが長かった場合「参考URL」と書かれているところが縦になったりです。
bootstrapは導入しています！

![]

rb
1<p id="notice"><%= notice %></p>
2
3<h1>Posts</h1>
4<div class="table-responsive">
5  <table class="table">
6    <thead>
7      <tr>
8        <th>タイトル</th>
9        <th>内容</th>
10        <th>公開状況</th>
11        <th>経緯</th>
12        <th>投稿日</th>
13        <th>重要度</th>
14        <th>要約</th>
15        <th>参考URL</th>
16        <th>ジャンル</th>
17        <th colspan="3"></th>
18      </tr>
19    </thead>
20
21    <tbody>
22        <% @posts.each do |post| %>
23          <tr>
24            <th scope="row"><%= link_to post.title, post %></th>
25            <td><%= post.body.truncate(15) %></td>
26            <td><%= post.status %></td>
27            <td><%= post.reason %></td>
28            <td><%= post.posted_at.strftime("%Y-%m-%d") %></td>
29            <td><%= post.rank %></td>
30            <td><%= post.summary %></td>
31            <td><%= link_to post.url, post.url  %></td>
32            <% post.genres.each do |genre| %>
33              <td><%= genre.name %></td>
34            <% end %>
35            <td><%= link_to 'Edit', edit_post_path(post) %></td>
36            <td><%= link_to 'Destroy', post, method: :delete, data: { confirm: 'Are you sure?' } %></td>
37          </tr>
38        <% end %>
39    </tbody>
40  </table>
41  <%= paginate @posts%>
42  <br>
43</div>
44
45
46

table{
  table-layout: fixed;
}
th{
  width: 100%;
}
td{
  text-overflow: ellipsis;
}

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

回答1件

ベストアンサー

tableにtable-layout: fixedを指定し、各thのwidthを相対値で指定してやれば良いと思います。
それでtdにwhite-space: nowrap・overflow: hidden・text-overflow: ellipsisあたりを指定してやるとより見やすくなるのではないでしょうか。

以下は飽くまで一例です。

html
1<table class="list">
2  <thead>
3    <tr>
4      <th class="list__item1">item1</th>
5      <th class="list__item2">item2</th>
6      <th class="list__item3">item3</th>
7      <th class="list__item4">item4</th>
8    </tr>
9  </thead>
10  <tbody>
11    <tr>
12      <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>
13      <td>hogehoge</td>
14      <td>fugafuga</td>
15      <td>foobar</td>
16    </tr>
17  </tbody>
18</table>

css
1.list {
2  width: 100%;
3  text-align: center;
4  border-collapse: collapse;
5  table-layout: fixed;
6}
7.list__item1 {
8  width: 40%;
9}
10.list__item2 {
11  width: 25%;
12}
13.list__item3 {
14  width: 20%;
15}
16.list__item4 {
17  width: 15%;
18}
19tr {
20  border-bottom: solid 1px #000;
21}
22td {
23  white-space: nowrap;
24  overflow: hidden;
25  text-overflow: ellipsis;
26  padding: 1rem 0;
27}