搜索
搜索

为什么html表将多列数据合并为一列

user824624 发表于 Dev
47
用户名

我想使用一个html表scrollbar，我制作了一个可滚动表的示例，但是问题是所有列数据都适合一列，如此处所示。

在此处输入图片说明

http://jsfiddle.net/bqtzykuj/4/

在此示例中，css是 

<tbody style="height: 350px; max-height: 400px;overflow-y: scroll;display:block;">

但是，如果删除display:block，前面描述的问题就消失了，但可滚动条也消失了。http://jsfiddle.net/bqtzykuj/5/

在此处输入图片说明

维卡斯迪普·辛格（Vikasdeep Singh）

您需要添加display: block;到thead为好。它会工作。

在这里检查：http : //jsfiddle.net/3x27f6by/

工作片段在这里：

table {
  border: 1px solid black;
}

thead {
  display: block;
}

th,
td {
  text-align: center;
  width: 100px;
  box-sizing: border-box;
}
<table class="table table-hover">
  <thead class="text-warning">
    <th>price</th>
    <th>amount</th>
    <th>total</th>
  </thead>
  <tbody style="height: 350px; max-height: 400px;overflow-y:auto; display:block;">

    <tr _ngcontent-c14="" class="ng-star-inserted">
      <td _ngcontent-c14="" style="color:red;">0.002078 </td>
      <td _ngcontent-c14="">12354.572620 </td>
      <td _ngcontent-c14="">25.677144 </td>
    </tr>
    <tr _ngcontent-c14="" class="ng-star-inserted">
      <td _ngcontent-c14="" style="color:red;">0.002078 </td>
      <td _ngcontent-c14="">12354.572620 </td>
      <td _ngcontent-c14="">25.677144 </td>
    </tr>
    <tr _ngcontent-c14="" class="ng-star-inserted">
      <td _ngcontent-c14="" style="color:red;">0.002078 </td>
      <td _ngcontent-c14="">12354.572620 </td>
      <td _ngcontent-c14="">25.677144 </td>
    </tr>
    <tr _ngcontent-c14="" class="ng-star-inserted">
      <td _ngcontent-c14="" style="color:red;">0.002078 </td>
      <td _ngcontent-c14="">12354.572620 </td>
      <td _ngcontent-c14="">25.677144 </td>
    </tr>
    <tr _ngcontent-c14="" class="ng-star-inserted">
      <td _ngcontent-c14="" style="color:red;">0.002078 </td>
      <td _ngcontent-c14="">12354.572620 </td>
      <td _ngcontent-c14="">25.677144 </td>
    </tr>
    <tr _ngcontent-c14="" class="ng-star-inserted">
      <td _ngcontent-c14="" style="color:red;">0.002078 </td>
      <td _ngcontent-c14="">12354.572620 </td>
      <td _ngcontent-c14="">25.677144 </td>
    </tr>
    <tr _ngcontent-c14="" class="ng-star-inserted">
      <td _ngcontent-c14="" style="color:red;">0.002078 </td>
      <td _ngcontent-c14="">12354.572620 </td>
      <td _ngcontent-c14="">25.677144 </td>
    </tr>
    <tr _ngcontent-c14="" class="ng-star-inserted">
      <td _ngcontent-c14="" style="color:red;">0.002078 </td>
      <td _ngcontent-c14="">12354.572620 </td>
      <td _ngcontent-c14="">25.677144 </td>
    </tr>
    <tr _ngcontent-c14="" class="ng-star-inserted">
      <td _ngcontent-c14="" style="color:red;">0.002078 </td>
      <td _ngcontent-c14="">12354.572620 </td>
      <td _ngcontent-c14="">25.677144 </td>
    </tr>
    <tr _ngcontent-c14="" class="ng-star-inserted">
      <td _ngcontent-c14="" style="color:red;">0.002078 </td>
      <td _ngcontent-c14="">12354.572620 </td>
      <td _ngcontent-c14="">25.677144 </td>
    </tr>
    <tr _ngcontent-c14="" class="ng-star-inserted">
      <td _ngcontent-c14="" style="color:red;">0.002078 </td>
      <td _ngcontent-c14="">12354.572620 </td>
      <td _ngcontent-c14="">25.677144 </td>
    </tr>
    <tr _ngcontent-c14="" class="ng-star-inserted">
      <td _ngcontent-c14="" style="color:red;">0.002078 </td>
      <td _ngcontent-c14="">12354.572620 </td>
      <td _ngcontent-c14="">25.677144 </td>
    </tr>
    <tr _ngcontent-c14="" class="ng-star-inserted">
      <td _ngcontent-c14="" style="color:red;">0.002078 </td>
      <td _ngcontent-c14="">12354.572620 </td>
      <td _ngcontent-c14="">25.677144 </td>
    </tr>
    <tr _ngcontent-c14="" class="ng-star-inserted">
      <td _ngcontent-c14="" style="color:red;">0.002078 </td>
      <td _ngcontent-c14="">12354.572620 </td>
      <td _ngcontent-c14="">25.677144 </td>
    </tr>
    <tr _ngcontent-c14="" class="ng-star-inserted">
      <td _ngcontent-c14="" style="color:red;">0.002078 </td>
      <td _ngcontent-c14="">12354.572620 </td>
      <td _ngcontent-c14="">25.677144 </td>
    </tr>
    <tr _ngcontent-c14="" class="ng-star-inserted">
      <td _ngcontent-c14="" style="color:red;">0.002078 </td>
      <td _ngcontent-c14="">12354.572620 </td>
      <td _ngcontent-c14="">25.677144 </td>
    </tr>
    <tr _ngcontent-c14="" class="ng-star-inserted">
      <td _ngcontent-c14="" style="color:red;">0.002078 </td>
      <td _ngcontent-c14="">12354.572620 </td>
      <td _ngcontent-c14="">25.677144 </td>
    </tr>
    <tr _ngcontent-c14="" class="ng-star-inserted">
      <td _ngcontent-c14="" style="color:red;">0.002078 </td>
      <td _ngcontent-c14="">12354.572620 </td>
      <td _ngcontent-c14="">25.677144 </td>
    </tr>
    <tr _ngcontent-c14="" class="ng-star-inserted">
      <td _ngcontent-c14="" style="color:red;">0.002078 </td>
      <td _ngcontent-c14="">12354.572620 </td>
      <td _ngcontent-c14="">25.677144 </td>
    </tr>
    <tr _ngcontent-c14="" class="ng-star-inserted">
      <td _ngcontent-c14="" style="color:red;">0.002078 </td>
      <td _ngcontent-c14="">12354.572620 </td>
      <td _ngcontent-c14="">25.677144 </td>
    </tr>
    <tr _ngcontent-c14="" class="ng-star-inserted">
      <td _ngcontent-c14="" style="color:red;">0.002078 </td>
      <td _ngcontent-c14="">12354.572620 </td>
      <td _ngcontent-c14="">25.677144 </td>
    </tr>
    <tr _ngcontent-c14="" class="ng-star-inserted">
      <td _ngcontent-c14="" style="color:red;">0.002078 </td>
      <td _ngcontent-c14="">12354.572620 </td>
      <td _ngcontent-c14="">25.677144 </td>
    </tr>
    <tr _ngcontent-c14="" class="ng-star-inserted">
      <td _ngcontent-c14="" style="color:red;">0.002078 </td>
      <td _ngcontent-c14="">12354.572620 </td>
      <td _ngcontent-c14="">25.677144 </td>
    </tr>
    <tr _ngcontent-c14="" class="ng-star-inserted">
      <td _ngcontent-c14="" style="color:red;">0.002078 </td>
      <td _ngcontent-c14="">12354.572620 </td>
      <td _ngcontent-c14="">25.677144 </td>
    </tr>
    <tr _ngcontent-c14="" class="ng-star-inserted">
      <td _ngcontent-c14="" style="color:red;">0.002078 </td>
      <td _ngcontent-c14="">12354.572620 </td>
      <td _ngcontent-c14="">25.677144 </td>
    </tr>
    <tr _ngcontent-c14="" class="ng-star-inserted">
      <td _ngcontent-c14="" style="color:red;">0.002078 </td>
      <td _ngcontent-c14="">12354.572620 </td>
      <td _ngcontent-c14="">25.677144 </td>
    </tr>
    <tr _ngcontent-c14="" class="ng-star-inserted">
      <td _ngcontent-c14="" style="color:red;">0.002078 </td>
      <td _ngcontent-c14="">12354.572620 </td>
      <td _ngcontent-c14="">25.677144 </td>
    </tr>
    <tr _ngcontent-c14="" class="ng-star-inserted">
      <td _ngcontent-c14="" style="color:red;">0.002078 </td>
      <td _ngcontent-c14="">12354.572620 </td>
      <td _ngcontent-c14="">25.677144 </td>
    </tr>
    <tr _ngcontent-c14="" class="ng-star-inserted">
      <td _ngcontent-c14="" style="color:red;">0.002078 </td>
      <td _ngcontent-c14="">12354.572620 </td>
      <td _ngcontent-c14="">25.677144 </td>
    </tr>
    <tr _ngcontent-c14="" class="ng-star-inserted">
      <td _ngcontent-c14="" style="color:red;">0.002078 </td>
      <td _ngcontent-c14="">12354.572620 </td>
      <td _ngcontent-c14="">25.677144 </td>
    </tr>
    <tr _ngcontent-c14="" class="ng-star-inserted">
      <td _ngcontent-c14="" style="color:red;">0.002078 </td>
      <td _ngcontent-c14="">12354.572620 </td>
      <td _ngcontent-c14="">25.677144 </td>
    </tr>
    <tr _ngcontent-c14="" class="ng-star-inserted">
      <td _ngcontent-c14="" style="color:red;">0.002078 </td>
      <td _ngcontent-c14="">12354.572620 </td>
      <td _ngcontent-c14="">25.677144 </td>
    </tr>
    <tr _ngcontent-c14="" class="ng-star-inserted">
      <td _ngcontent-c14="" style="color:red;">0.002078 </td>
      <td _ngcontent-c14="">12354.572620 </td>
      <td _ngcontent-c14="">25.677144 </td>
    </tr>
    <tr _ngcontent-c14="" class="ng-star-inserted">
      <td _ngcontent-c14="" style="color:red;">0.002078 </td>
      <td _ngcontent-c14="">12354.572620 </td>
      <td _ngcontent-c14="">25.677144 </td>
    </tr>
    <tr _ngcontent-c14="" class="ng-star-inserted">
      <td _ngcontent-c14="" style="color:red;">0.002078 </td>
      <td _ngcontent-c14="">12354.572620 </td>
      <td _ngcontent-c14="">25.677144 </td>
    </tr>
    <tr _ngcontent-c14="" class="ng-star-inserted">
      <td _ngcontent-c14="" style="color:red;">0.002078 </td>
      <td _ngcontent-c14="">12354.572620 </td>
      <td _ngcontent-c14="">25.677144 </td>
    </tr>
    <tr _ngcontent-c14="" class="ng-star-inserted">
      <td _ngcontent-c14="" style="color:red;">0.002078 </td>
      <td _ngcontent-c14="">12354.572620 </td>
      <td _ngcontent-c14="">25.677144 </td>
    </tr>
    <tr _ngcontent-c14="" class="ng-star-inserted">
      <td _ngcontent-c14="" style="color:red;">0.002078 </td>
      <td _ngcontent-c14="">12354.572620 </td>
      <td _ngcontent-c14="">25.677144 </td>
    </tr>
    <tr _ngcontent-c14="" class="ng-star-inserted">
      <td _ngcontent-c14="" style="color:red;">0.002078 </td>
      <td _ngcontent-c14="">12354.572620 </td>
      <td _ngcontent-c14="">25.677144 </td>
    </tr>
    <tr _ngcontent-c14="" class="ng-star-inserted">
      <td _ngcontent-c14="" style="color:red;">0.002078 </td>
      <td _ngcontent-c14="">12354.572620 </td>
      <td _ngcontent-c14="">25.677144 </td>
    </tr>
    <tr _ngcontent-c14="" class="ng-star-inserted">
      <td _ngcontent-c14="" style="color:red;">0.002078 </td>
      <td _ngcontent-c14="">12354.572620 </td>
      <td _ngcontent-c14="">25.677144 </td>
    </tr>
    <tr _ngcontent-c14="" class="ng-star-inserted">
      <td _ngcontent-c14="" style="color:red;">0.002078 </td>
      <td _ngcontent-c14="">12354.572620 </td>
      <td _ngcontent-c14="">25.677144 </td>
    </tr>
  </tbody>
</table>

向th和添加以下样式以td使其外观更好：

th,
td {
  text-align: center;
  width: 100px;
  box-sizing: border-box;
}

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

将多列数据合并为一列

如何将数据表的两列或多列合并为一列？

将多列合并为一列

将多列合并为一列 MS Access

将多列合并为一列熊猫

如何将多列合并为一列？

使用R将数据集中的多列合并为一列

将多列熊猫数据框合并为一列

将熊猫数据列合并为一列

通过根据列值熊猫数据框将一列置于另一列之下，将多列合并为一列

将列合并为一列

将数据合并为一列-SQL Server 2012

将两张表的数据合并为一列

数据合并为一列

将多列数据合并为一个熊猫

如何在SQL Server中将多列合并为同一表的一列？

用乘法将一列数据合并为一列

将多列合并为整洁数据

在同一数据框熊猫中将多列合并为一列

ACCESS / SQL将多行与一列合并为一行并创建多列

使用唯一标识符将多列合并为一列 - EXCEL

R将两列合并/合并为一列

在SQL中将多列合并为一列

多列/行合并为一列/行

在 Postgres 中将多列合并为一列

将多列合并为一列作为python pandas中的列表

如何将多列合并为一列并用'-'分隔？

将多列合并为具有多行的一列

R根据单元格是否为空将多列合并为一列

TOP 榜单

  1. 1

    蓝屏死机没有修复解决方案

  2. 2

    计算数据帧中每行的NA

  3. 3

    UITableView的项目向下滚动后更改颜色，然后快速备份

  4. 4

    Node.js中未捕获的异常错误，发生调用

  5. 5

    在 Python 2.7 中。如何从文件中读取特定文本并分配给变量

  6. 6

    Linux的官方Adobe Flash存储库是否已过时？

  7. 7

    验证REST API参数

  8. 8

    ggplot：对齐多个分面图-所有大小不同的分面

  9. 9

    Mac OS X更新后的GRUB 2问题

  10. 10

    通过 Git 在运行 Jenkins 作业时获取 ClassNotFoundException

  11. 11

    带有错误“ where”条件的查询如何返回结果？

  12. 12

    用日期数据透视表和日期顺序查询

  13. 13

    VB.net将2条特定行导出到DataGridView

  14. 14

    如何从视图一次更新多行（ASP.NET - Core）

  15. 15

    Java Eclipse中的错误13，如何解决？

  16. 16

    尝试反复更改屏幕上按钮的位置 - kotlin android studio

  17. 17

    离子动态工具栏背景色

  18. 18

    应用发明者仅从列表中选择一个随机项一次

  19. 19

    当我尝试下载 StanfordNLP en 模型时，出现错误

  20. 20

    python中的boto3文件上传

  21. 21

    在同一Pushwoosh应用程序上Pushwoosh多个捆绑ID

热门标签

归档