记录在工作中可能常用到的css布局

   Tips - (暂时不考虑兼容性)

last update : 2022年5月13日13:15:50

-----------main----------------

一、table布局 表头固定内容滚动 并修改滚动条样式

    ```
<template>
  <div class="container">
    <table class="iceui-table">
      <thead>
      <tr>
        <td>被监督企业</td>
        <td>事项子类</td>
        <td>事项名称</td>
        <td>预警信息</td>
      </tr>
      </thead>
      <tbody>
      <tr class="content tr" v-for="item in 100" :key="item">
        <td class="td">嘻哈娱乐企业</td>
        <td class="td">快乐玩耍</td>
        <td class="td">审定上报年度预算超额事项</td>
        <td class="td danger">不符合公司财务支付流程要求</td>
      </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  // 组件名称
  name: 'dashboard',
  // 组件参数 接收来自父组件的数据
  props: {},
  // 局部注册的组件
  components: {},
  // 计算属性
  computed: {},
  // 侦听器
  watch: {}
}
</script>

<style lang="scss" scoped>
.container {
  width: 743px;
  height: 321px;
  background: #032A44;
  color: #fff;
  padding-top: 20px;
  padding-left: 20px;
  padding-right: 0px;

  table tbody {
    height: calc(321px - 75px);
    display: block;
    overflow-y: scroll;

    &::-webkit-scrollbar {
      width: 6px;
      height: 6px;
    }

    /* 浏览器滚动条 滑块部分 */
    &::-webkit-scrollbar-thumb {
      background-color: #0B5391 !important;
      border-radius: 5px;
    }

    /* 浏览器滚动条 轨道部分 */
    &::-webkit-scrollbar-track {
      display: none;
      background: #0C234D !important;
    }

    &::-webkit-scrollbar-corner {
      display: none;
      background: #0C234D !important;
    }
  }

  table thead, tbody tr {
    display: table;
    table-layout: fixed;
    width: 100%;
  }

  tbody tr > td {
    border-bottom: 1px solid rgba(79, 180, 224, .2);
    height: 75px;
    padding-left: 22px;
    padding-right: 10px;
  }

  thead tr > td {
    padding: 10px 0 9px 23px;
  }

  table thead {
    width: calc(100% - 8px);
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #51DCFF;
    background: #073C6A;
  }
  .danger {
    color: red;
  }
}

</style>

图示 :