web-dev-qa-db-ja.com

スクロールボディを具体化する

tbody height width overflow-y: scrollの設定中に問題が発生しました。

このCSSを試しました

.table-status-sheet tbody{
  min-height: 300px;
  overflow-y: auto;
}

これは私のテーブルコードです

 <div class="responsive-table table-status-sheet">
    <table class="bordered">
      <thead>
        <tr>
          <th class="center">No.</th>
          <th class="center">Category</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td>Category1</td>                 
        </tr>
        <tr>
          <td>2</td>
          <td>Category2</td>                 
        </tr>
        <tr>
          <td>3</td>
          <td>Category3</td>                 
        </tr>
        <tr>
          <td>4</td>
          <td>Category4</td>                 
        </tr>
      </tbody>
    </table>
  </div>

このコードはbootstrapで機能しますが、「マテリアライズド」テーマでは機能しません。この問題の修正にご協力ください。

cssmaterialize
6
Dilajani Kotavadekar

これがあなたがそれをする方法です。

JSFiddle DEMO

tbody {
display:block;
height:150px;
overflow:auto;
}
thead, tbody tr {
display:table;
width:100%;
table-layout:fixed;
}
thead {
width: calc( 100% - 1em )
}
table {
width:100%;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/css/materialize.min.css" rel="stylesheet"/>
 <div class="responsive-table table-status-sheet">
    <table class="bordered">
      <thead>
        <tr>
          <th class="center">No.</th>
          <th class="center">Category</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td>Category1</td>                 
        </tr>
        <tr>
          <td>2</td>
          <td>Category2</td>                 
        </tr>
        <tr>
          <td>3</td>
          <td>Category3</td>                 
        </tr>
        <tr>
          <td>4</td>
          <td>Category4</td>                 
        </tr>
      </tbody>
    </table>
  </div>
6
Muhammad

別のQで見つかった解決策： オーバーフロースクロールでtbodyの高さを設定する方法

tbodyを-> display：block;に設定する必要があります。

table ,tr td{}
    tbody {
        display:block;
        height:50px;
        overflow:auto;
    }
    thead, tbody tr {
        display:table;
        width:100%;
        table-layout:fixed;
    }
    thead {
        width: calc( 100% - 1em );
    }
    table {
        width:400px;
    }
0
Gabbax0r