Sortableを使用し、ドラッグで並び替えが出来、ヘッダー固定でスクロール可能更に、テーブルの項目幅を%で指定できるテーブル

前提・実現したいこと

Sortableを使用し、ドラッグで並び替えが出来、ヘッダー固定でスクロール可能なテーブル
更に、テーブルの項目幅を%で指定できる

発生している問題・エラーメッセージ

tbodyの中身がテーブルの幅に合わせられない

該当のソースコード

css
1table{
2    width: 100%;
3}
4
5table, th, td {
6    border: 1px solid grey;
7  }
8  
9  sortdata {
10    display: block;
11    width: 100%;
12    box-sizing: border-box;
13  }
14  
15  tbody {
16    display: block;
17    overflow-y: scroll;
18    height: 210px;
19    width:  100%;
20  }
21  
22  .number,.name,.description{
23    display: block;
24    box-sizing: border-box;
25  }
26
27  .number {
28    float: left;
29    width: 25%;
30  }
31  
32  .name {
33    float: left;
34    width: 25%;
35  }
36  
37  .description {
38    float: left;
39    width: 50%;
40  }

html
1<!DOCTYPE html>
2<html lang="ja">
3
4<head>
5    <meta charset="utf-8">
6    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7    <meta http-equiv="X-UA-Compatible" content="ie=edge">
8    <link rel="stylesheet" href="./main.css">
9    <!-- <script src="./main.js" defar></script> -->
10    <link type="text/css" rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/cupertino/jquery-ui.min.css" />
11    <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>*1
12    <script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
13    <title>タイトル</title>
14    <noscript>
15        noscript
16    </noscript>
17</head>
18
19<body>
20    <header>
21        ヘッダー
22    </header>
23    <main>
24        <table>
25            <thead>
26              <tr>
27                <th class="number">#</th>
28                <th class="name">name</th>
29                <th class="description">description</th>
30              </tr>
31            </thead>
32            <tbody id="sortdata">
33              <tr>
34                <td class="number">1</td>
35                <td class="name">フシギダネ</td>
36                <td class="description">大きな種を背負っているくさタイプのポケモン。</td>
37              </tr>
38              <tr>
39                <td class="number">2</td>
40                <td class="name">ゼニガメ</td>
41                <td class="description">カメのような姿をしたみずタイプのポケモン。</td>
42              </tr>
43              <tr>
44                <td class="number">3</td>
45                <td class="name">ユンゲラー</td>
46                <td class="description">ケーシィの進化形で、ケーシィがレベル16で進化した姿。</td>
47              </tr>
48              <tr>
49                <td class="number">4</td>
50                <td class="name">ストライク</td>
51                <td class="description">カマキリに似た風貌を持つポケモン。</td>
52              </tr>
53              <tr>
54                <td class="number">5</td>
55                <td class="name">タッツー</td>
56                <td class="description">タツノオトシゴのような姿をしたポケモン。</td>
57              </tr>
58            </tbody>
59          </table>
60    </main>
61    <footer>
62        フッター
63    </footer>
64    <script type="text/javascript">
65    　 $('#sortdata').sortable();
66    </script>
67</body>
68
69</html>

試したこと

cssでsortdata及びtbodyのwidthを100%にしたが、変わらず。

補足情報（FW/ツールのバージョンなど）

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

回答2件

ベストアンサー

tr も display: block; にする必要がありますね。

css
1/* ↓ tr追加*/
2  tr, .number,.name,.description{
3    display: block;
4    box-sizing: border-box;
5  }

自分がするなら、float で横並びにせずに flex で横並びにします。

css
1table {
2  width: 100%;  
3}
4
5table, th, td {
6  border: 1px solid grey;
7}
8
9tbody {
10  display: block;
11  overflow-y: scroll;
12  height: 210px;
13  width:  100%;
14}
15
16tr {
17  display: flex; /* 横並び */
18}
19
20thead {
21  display: block;
22  width: Calc(100% - 20px); /* スクロールバーの幅を引く */
23}
24
25.number {
26  width: 25%;
27}
28
29.name {
30  width: 25%;
31}
32
33.description {
34  width: 50%;
35}

thead はスクロールバーの幅だけ狭くしないと少しずれます。
ただ、スクロールバーの幅はブラウザやOSで異なる可能性があるのでその辺は検証してください。
上記のコードは Windows の Chrome に合わせてます。

floatだと幅を狭くして折り返された時、高さが揃わない。

flexだと揃う。

投稿2020/04/04 04:39

編集2020/04/04 05:08

hatena19

総合スコア33790

TanakaJirou

2020/04/04 05:19

ありがとうございます！想定していたとおりの動きをしました！ .number,.name,.descriptionにfloat: left;があっても問題なく動作しました。 CSSの経験が殆どないので、 display: flex;というのは知りませんでした。調べたところ、「ある要素に定義するだけで、その直下の要素が並列になる便利なスタイル」ということみたいですね質問から外れてしまいますが、CSSについてどうやって勉強されました？慣れなのでしょうか・・・・？それともおすすめの勉強方法やサイトがアレば教えて下さい！

hatena19

2020/04/04 05:52

> .number,.name,.descriptionにfloat: left;があっても問題なく動作しました。 flex の効果の方か強いので、float: left; はあってもなくても問題ないです。ただし、floatは後の要素にも影響を及ぼす場合があるので、現在ではfloatは本来の目的であるテキストの回り込み以外では使わない方かいいと思います。 CSSの勉強は、ほぼ、やりたいことをWEB検索で調べて出てきた用語をリファレンス https://developer.mozilla.org/ja/docs/Web/CSS/Reference で調べるという場当たり的な勉強法でここまできてます。あとは flex とか grid などの新しいテクニックは普段からチェックしてます。

TanakaJirou

2020/04/04 08:05

flexとfloatの関係性まで教えてくださってありがとうございます。勉強方法についてもありがとうございます。ネットで検索という方法を継続して行い CSSについて慣れていければと思いました。

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

tbodyの中身がテーブルの幅に合わせられない

css
1  tbody {
2    /* display: block; ←削除 */
3    overflow-y: scroll;
4    height: 210px;
5    width:  100%;
6  }

投稿2020/04/04 03:57

Lhankor_Mhy

総合スコア36158

TanakaJirou

2020/04/04 04:22 編集

ご回答ありがとうございます。一応動くのですが、 overflow-y: scroll; height: 210px; テーブルの高さ設定と、スクロールバー表示が無効になってしまいます・・・・。

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.46%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！