Open1

Tableのメモ

remonremon

Tbodyをスクロースさせる

<table>
    <thead>
      <tr>
          <th>aaa</th>
          <th>bbb</th>
          <th>ccc</th>
      </tr>
    </thead>
    <body>
      <tr>
          <td>aaa</td>
          <td>bbb</td>
          <td>ccc</td>
      </tr>
     <tr>
          <td>aaa</td>
          <td>bbb</td>
          <td>ccc</td>
      </tr>
    <tr>
          <td>aaa</td>
          <td>bbb</td>
          <td>ccc</td>
      </tr>
    <tr>
          <td>aaa</td>
          <td>bbb</td>
          <td>ccc</td>
      </tr>
     <tr>
          <td>aaa</td>
          <td>bbb</td>
          <td>ccc</td>
      </tr>
    </body>
</table>

普通にスクロールさせない

table {
  background: #ddd;
}

tbody {
  height: 100px;
  overflow-y: scroll;
}
table {
  width: 500px;
  background: #ddd;
}

thead, tbody {
display: block;
}

tbody {
  height: 100px;
  overflow-y: scroll;
}

thead,tbodyそれぞれにdisplayつけたりつけなかったり試してみる。
ただこうすると色々レイアウトが崩れたりする。


ここでwidht: 100%を指定したい場合
結構tableのwidthを親いっぱいにするのはいい気がする。
th,tdとかが思うようにいかない。

この時tbody, theadはtableのwidthいっぱいになっている。

trとかを
min-widthを指定したりして整えていくのだろうか。