html 实现一个表头固定、列表可滚动、宽度自适应、文字自动换行的table

一颗苹果想要成为一个星球

已于 2023-12-07 11:03:38 修改

阅读量658

点赞数 1

文章标签： html css3 css

于 2023-12-07 11:03:23 首次发布

本文链接：https://blog.csdn.net/weixin_44463883/article/details/134850343

版权

  table {
    height: 100%;
    width: 100%;
    border-collapse: collapse;
    color: white;
    text-align: center;

    thead {
      font-size: 14px;
      font-weight: 400;
      color: #0CD6FF;
    }

    tbody {
      display: block;
      height: 100%;
      overflow-y: auto;
    }

    tr {
      display: table;
      width: 100%;
      table-layout: fixed;
      background: rgba(124, 182, 230, 0.1);
      border-bottom: 5px solid rgb(6, 19, 34);
      min-height: 30px;
    }

    th, td {
      word-wrap: break-word;
      white-space: pre-wrap;
      vertical-align: middle;
      padding: 5px 0;
    }

    ::-webkit-scrollbar {
      width: 0;
      background-color: transparent;
    }
  }