代码之家 › 专栏 › 技术社区 › bellotas

带固定头的引导表-角形5

css-tables angular5 css

bellotas · 技术社区 · 6 年前

我用HTML创建了一个表,我想显示它的标题是固定的(滚动只会影响到正文)。

我找到了一个解决方案,它几乎可以按我想要的方式工作。

tbody {
  display:block;
  height:500px;
  overflow:auto;
}
thead, tbody tr {
  display:table;
  width:100%;
  table-layout:fixed;/* even columns width , fix width of table too*/
}
thead {
  width: calc( 100% - 1em )/* scrollbar is average 1em/16px width, remove it from thead width */
}
table {
  width:400px;
}

问题是这个属性 table-layout: fixed ,它固定了列的宽度,因此没有正确显示我的列(它们重叠):

我怎么修? 我已经尝试了四个可能的值 table-layout

1 回复 | 直到 6 年前

××× × ×××× 6 年前

使用 td {word-wrap: break-word;}

tbody {
  display:block;
  height:500px;
  overflow:auto;
}
thead, tbody tr {
  display:table;
  width:100%;
  table-layout:fixed;/* even columns width , fix width of table too*/
}
td{
    word-wrap: break-word;
}
thead {
  width: calc( 100% - 1em )/* scrollbar is average 1em/16px width, remove it from thead width */
}
table {
  width:400px;
}

<table class="a">
  <thead>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </thead>
  <tbody>
  <tr>
    <td>AlfredsFutterkisteghrtrh</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>Helen Bennett</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Magazzini Alimentari Riuniti</td>
    <td>Giovanni Rovelli</td>
    <td>Italy</td>
  </tr>
    <tr>
    <td>Magazzini Alimentari Riuniti</td>
    <td>Giovanni Rovelli</td>
    <td>Italy</td>
  </tr>
    <tr>
    <td>Magazzini Alimentari Riuniti</td>
    <td>Giovanni Rovelli</td>
    <td>Italy</td>
  </tr>
    <tr>
    <td>Magazzini Alimentari Riuniti</td>
    <td>Giovanni Rovelli</td>
    <td>Italy</td>
  </tr>
  </tbody>
</table>

推荐文章

Vimal · 用于用户名验证的JavaScript正则表达式

6 年前

user2024080 · 我如何防止我的表单在以后编辑?

6 年前

DiPix · 如何在Visual Studio中将Angular 5应用程序添加到解决方案中?

6 年前

Karl Johan Vallner · 如何将datatable寻呼机模板添加到Angular ngx datatable

6 年前

Ali Bedaer · 具有多个组件的角形5

6 年前

user8707389 · Angular 5侦听器或用于按钮禁用属性更改的指令

6 年前

3gwebtrain · 如何单独更新'BehaviorSubject'单个值

6 年前

Neto · 角度5-使用RouterUseStrategy时如何重新加载当前数据

6 年前

Lakshan Thilakarathne · Firebase 5 Angular 5 AngularFireList。snapshotChanges()错误

6 年前

Robby · 角度5构建生成main。以MB为单位进行捆绑,这会在生产中造成性能问题

6 年前