实体化滚动体答案

【问题标题】：Materialize scroll tbody实体化滚动体
【发布时间】：2016-12-08 13:20:02
【问题描述】：

我在设置tbody 高度宽度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>

此代码在引导程序中有效，但在“Materialized”主题中无效。请帮我解决这个问题。

【问题讨论】：

能否请您提供更多代码或任何链接以预览此代码？
你不是唯一一个有这个问题的人......我也面临着改变 tbody 高度的困难......不管我应用什么 css 它不会改变它的高度
@Muhammad 怎么样？？
@weinde 这是我使用 css 完成的，stackoverflow.com/a/41066778/1966247

标签： css materialize

【解决方案1】：

你可以这样做。

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>

【讨论】：

我在我的项目中尝试了这段代码。但它是相互重叠的。因为我使用超过 12 列。我想做什么来克服重叠文本问题？
它在移动设备上打破了桌子。
@ShaidaMuhammad 它是如何打破桌子的？你的意思是重叠列？

【解决方案2】：

在另一个Q中找到解决方案：How to set tbody height with overflow scroll

你必须将 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;
    }

【讨论】：