HTMLでテーブルを2カラム表示

html, css を用いて、テーブルを左右に2カラム表示したと考えています。
イメージとしては、アプリケーションのサイドバーとメインウィンドウという感じです。

【現状】
画面サイズが大きい時は左右に表示されているのですが、ウィンドウサイズを小さく変更していくと、右側の[メインカラム]が[サイドバー]の下に落ちてしまいます。

【目標】
[サイドバー]、[メインカラム]共に最小ピクセル数が決まっており、それまでは<曲名>,<再生時間>それぞれの欄が縮んでいく感じです。
ウィンドウサイズが最小ピクセル数を下回った場合には、それ以上各欄(<曲名>,<再生時間>)のサイズは小さくせずに、左右のスクロールバーが現れて画面は切れている感じにしたいです。

環境はmacOS Sierraです。
どなたかわかる方がいらっしゃいましたら、ご教授お願いいたします。

参考までに、現状のコードを記載します。

html
1<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
2<html lang="ja">
3    <head>
4        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
5        <link rel="stylesheet" type="text/css" href="test.css">
6        <title>ページのタイトル</title>
7    </head>
8
9    <body>
10        <!-- コンテナ開始 -->
11        <div id="container">
12
13            <!-- ヘッダ開始 -->
14            <!-- <div id="header">
15                ［ヘッダ］
16            </div> -->
17            <!-- ヘッダ終了 -->
18
19            <!-- ナビゲーション開始 -->
20            <div id="test">
21            <div id="nav">
22                [サイドバー]<br>
23                <input style="text", name="search">
24                <button type="button">検索</button>
25                <table align="center">
26                    <thead>
27                        <tr>
28                            <th class="col11", align="left">番号</th>
29                            <th class="col12", align="left">曲名</th>
30                        </tr>
31                    </thead>
32                    <tbody>
33                        <tr>
34                            <td class="col11", align="left">1</td>
35                            <td class="col12", align="left">hogehoge1</td>
36                        </tr>
37                    </tbody>
38                </table>
39            </div>
40            <!-- ナビゲーション終了 -->
41
42            <!-- メインカラム開始 -->
43            <div id="content">
44                ［メインカラム］
45                <table>
46                    <thead>
47                        <tr>
48                            <th class="col1", align="left">番号</th>
49                            <th class="col2", align="left">曲名</th>
50                            <th class="col3", align="left">再生時間</th>
51                            <!-- <th class="col4", align="left">アーティスト名</th> -->
52                            <!-- <th class="col5", align="left">アルバム</th> -->
53                            <!-- <th class="col6", align="left">ジャンル</th> -->
54                        </tr>
55                    </thead>
56                    <tbody>
57                        <tr>
58                            <td class="col1", align="left">1</td>
59                            <td class="col2", align="left">hogehoge1</td>
60                            <td class="col3", align="left">hogehoge2</td>
61                            <!-- <td class="col4", align="left">hogehoge3</td> -->
62                            <!-- <td class="col5", align="left">hogehoge4</td> -->
63                            <!-- <td class="col6", align="left">hogehoge5</td> -->
64                        </tr>
65                        <tr>
66                            <td class="col1", align="left">2</td>
67                            <td class="col2", align="left">hogehoge1</td>
68                            <td class="col3", align="left">hogehoge2</td>
69                            <!-- <td class="col4", align="left">hogehoge3</td> -->
70                            <!-- <td class="col5", align="left">hogehoge4</td> -->
71                            <!-- <td class="col6", align="left">hogehoge5</td> -->
72                        </tr>
73                    </tbody>
74                </table>
75            </div>
76            </div>
77            <!-- メインカラム終了 -->
78
79            <!-- フッタ開始 -->
80            <!-- <div id="footer">
81                ［フッタ］
82            </div> -->
83            <!-- フッタ終了 -->
84
85
86        </div>
87        <!-- コンテナ終了 -->
88
89    </body>
90</html>

css
1@charset "utf-8";
2
3/* --- 全体の背景・テキスト --- */
4body {
5    margin: 0;
6    padding: 0;
7    background-color: #ffffff; /* ページの背景色 */
8    color: #000000; /* 全体の文字色 */
9    font-size: 100%; /* 全体の文字サイズ */
10}
11
12/* --- 全体のリンクテキスト --- */
13a:link { color: #0000ff; }
14a:visited { color: #800080; }
15a:hover { color: #ff0000; }
16a:active { color: #ff0000; }
17
18/* --- コンテナ --- */
19#container {
20    width: 100%; /* ページの幅 */
21    margin: 0 auto; /* センタリング */
22    background: url(sidebar_200.gif) repeat-y left; /* サイドバーの背景画像 */
23    background-color: #ffffff; /* メインカラムの背景色 */
24    border-left: 1px #c0c0c0 solid; /* 左の境界線 */
25    border-right: 1px #c0c0c0 solid; /* 右の境界線 */
26}
27
28/* --- ヘッダ --- */
29#header {
30    background-color: #ffe080; /* ヘッダの背景色 */
31    /*min-width: 500px;*/
32}
33
34/* --- ナビゲーション --- */
35#nav {
36    float: left;
37    width: 20%; /* サイドバーの幅 */
38    border-right: 1px #c0c0c0 solid;
39    min-width: 300px;
40    box-sizing: border-box;
41    height: 100%;
42}
43
44
45/* --- メインカラム --- */
46#content {
47    /*float: left;*/
48    /*float: right;*/
49    /*box-sizing:border-box;*/
50    width: 80%; /* メインカラムの幅 */
51    min-width: 300px;
52    height: 100%;
53}
54
55/* --- フッタ --- */
56#footer {
57    clear: left; /* フロートのクリア */
58    width: 100%;
59    background-color: #ffe080; /* フッタの背景色 */
60}
61
62#test {
63    width: 100%;
64    min-width: 300px;
65}
66
67table thead,
68table tbody {
69    display: block;
70}
71
72table tbody {
73    overflow-y: scroll;
74    height: 120px;        /* 高さはお好みで */
75}
76
77/* 各列の幅を設定 */
78table .col1 { width: 60px;  min-width: 50px;}
79table .col2 { width: 400px; min-width: 300px; }
80table .col3 { width: 200px; min-width: 150px;}
81table .col4 { width: 150px;  }
82table .col5 { width: 150px;  }
83table .col6 { width: 150px; }
84table .col11 { width: 60px; min-width: 50px;}
85table .col12 { width: 200px; min-width: 150px;}
86
87/*movie06.gif*/

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

回答3件

レイアウト方法はいくつかありますが、Flexbox がいいかなと思います。
https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes

CSS
1#test {
2    display: flex;
3}
4
5#nav {
6    width: 20%;
7    min-width: 75px;
8    overflow-x: auto;
9}
10
11#content {
12    width: 80%;
13    min-width: 300px;
14    overflow-x: auto;
15}
16
17#content table {
18    width: 100%;
19}

投稿2017/08/10 08:28

x_x

総合スコア13749

他の方のご意見と私も同じですが、フロートよりはFlexBoxを使う方が融通が効き易いかと（場合によります）思います。今のコードを利用するのであれば
①cssコード「#container」にdisplay: flex;追加
②HTMLコード<div id="test">の削除（対応の</div>もです）
上記で意図する動きに近いと思いますが試して見て下さい。

投稿2017/08/14 01:11

yoshinavi

総合スコア3523

ベストアンサー

近いレイアウトを書いてみました。このような動きのイメージで合っていますか？

JSFiddle

もしイメージと違うようでしたらコメントお願いします。

html
1<div class="container">
2  <div class="left">
3    <h2 class="label">Side bar</h2>
4    
5    <p class="row">
6      <input class="field">
7      <button class="button">Search</button>
8    </p>
9
10    <table class="table">
11      <thead>
12        <tr>
13          <th>Num</th>
14          <th>Name</th>
15        </tr>
16      </thead>
17      <tbody>
18        <tr>
19          <td>1</td>
20          <td>hogehoge1</td>
21        </tr>
22      </tbody>
23    </table>
24  </div>
25
26  <div class="right">
27    <h2 class="label">Main column</h2>
28
29    <table class="table">
30      <thead>
31        <tr>
32          <th>Num</th>
33          <th>Name</th>
34          <th>Length</th>
35        </tr>
36      </thead>
37      <tbody>
38        <tr>
39          <td>1</td>
40          <td>hogehoge1</td>
41          <td>hogehoge2</td>
42        </tr>
43        <tr>
44          <td>2</td>
45          <td>hogehoge1</td>
46          <td>hogehoge2</td>
47        </tr>
48      </tbody>
49    </table>
50  </div>
51</div>

css
1body {
2  margin: 0;
3}
4th,
5td {
6  background-color: #ccc;
7}
8.container {
9
10}
11.container::after {
12  display: block;
13  clear: both;
14  content: "";
15}
16.left {
17  float: left;
18  width: 200px; /*左ペイン最小ピクセル数*/
19}
20.right {
21  float: left;
22  width: 320px; /*右ペイン最小ピクセル数*/
23}
24.table {
25  border-collapse: collapse;
26}
27.table th,
28.table td {
29  padding: 0;
30}
31.left .table th:nth-child(1),
32.left .table td:nth-child(1) {
33  width: 30%; /*左ペインテーブル1列目画面に余裕があるときのセル幅*/
34  min-width: 80px; /*左ペインテーブル1列目最小ピクセル数*/
35}
36.left .table th:nth-child(2),
37.left .table td:nth-child(2) {
38  width: 70%; /*左ペインテーブル2列目画面に余裕があるときのセル幅*/
39  min-width: 120px; /*左ペインテーブル2列目最小ピクセル数*/
40}
41.right .table th:nth-child(1),
42.right .table td:nth-child(1) {
43  width: 20%; /*右ペインテーブル1列目画面に余裕があるときのセル幅*/
44  min-width: 80px; /*右ペインテーブル1列目最小ピクセル数*/
45}
46.right .table th:nth-child(2)
47.right .table td:nth-child(2) {
48  width: 40%; /*右ペインテーブル1列目画面に余裕があるときのセル幅*/
49  min-width: 120px; /*右ペインテーブル2列目最小ピクセル数*/
50}
51.right .table th:nth-child(3),
52.right .table td:nth-child(3) {
53  width: 40%; /*右ペインテーブル1列目画面に余裕があるときのセル幅*/
54  min-width: 120px; /*右ペインテーブル3列目最小ピクセル数*/
55}
56
57@media screen and (max-width: 520px) {
58  /*最小ピクセル数を下回った場合*/
59  .left {
60    width: 30%;
61    overflow-x: scroll;
62  }
63  .right {
64    width: 70%;
65    overflow-x: scroll;
66  }
67}