スクロールバーのあるtableのthやtdにwidthを指定したい

Question

前提・実現したいこと

tbodyにyスクロールバーとxスクロールバーが常時表示された状態のtableを作るとき、
th、tdにカラム毎にwidthを指定したいです。

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

1　tbodyは外側のdiv内に収まりxyスクロールバーも想定どおりに表示されるのですが、
　　theadが親要素のdivのwidthを突き抜けて表示されてしまうため、
　　tbodyのxスクロールバーがスクロールしても効力が及ばない。

2 　td、thにwidthを指定しても効かない。

該当のソースコード

<div class="a">
  <table>
    <thead>
      <tr>
        <th>abc</th>
        <th>abc</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>123</td>
        <td>123</td>
      </tr>
    </tbody>
  </table>
</div>

div.a{
  width:100%;
  table{
    width:100%;
    table-layout:fixed;
    border-collapse:collapse;
    thead, tbody{
      display:block;
      td, th{
        width:200px;
        min-width:200px;
        table-layout:fixed;
        white-spase:nowrap;
      }
    }
    tbody{
      overflow-y:scroll;
      height:200px;
    }
    th:nth-of-type(1){
      width:50px;
    }
    td:nth-of-type(1){
      width:50px;
    }
  }
}

試したこと

ネット上で様々な方法が紹介されていますが、xスクロールバーを表示しない場合にはth、tdのwidthは有効にできました。

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

CSSに不慣れなため、できるだけ具体的にどこが悪いのか教えて頂けると助かります。

Answer 1

.aにoverflow-yでどうですか

div.a{
  overflow-y:scroll;
  width:100%;
  table{
    width:100%;
    table-layout:fixed;
    border-collapse:collapse;
    thead, tbody{
      display:block;
      td, th{
        width:200px;
        min-width:200px;
        table-layout:fixed;
        white-spase:nowrap;
      }
    }
    tbody{
      height:200px;
    }
    th:nth-of-type(1){
      width:50px;
    }
    td:nth-of-type(1){
      width:50px;
    }
  }
}

widthがきかないのはmin-widthが指定されてるからです
min-widthを0にしてください

div.a{
  overflow-y:scroll;
  width:100%;
  table{
    width:100%;
    table-layout:fixed;
    border-collapse:collapse;
    thead, tbody{
      display:block;
      td, th{
        width:200px;
        min-width:200px;
        table-layout:fixed;
        white-spase:nowrap;
      }
    }
    tbody{
      height:200px;
    }
    th:nth-of-type(1){
      width:50px;
      min-width: 0;
    }
    td:nth-of-type(1){
      width:50px;
      min-width: 0
    }
  }
}

Comments

[退会済みユーザー]

ありがとうございます。
ただ、その方法では、一見してtableの幅内に収まったように見えても、
windowのリサイズが発生するとtheadがdivのwidthを突き抜けてしまう現象に変わりはありません。
また、th、tdのwidth指定についても、tableのwidthに収まるよう自動調整されるだけで、指定したwidthが適用される訳ではありません。
div要素とtable要素に対してyスクロールバーが二重に表示されるのも避けたいです。