ant-table 表格组件样式

最新推荐文章于 2024-06-10 01:58:08 发布

Y_Hungry

最新推荐文章于 2024-06-10 01:58:08 发布

阅读量875

点赞数 2

分类专栏： vue3 文章标签： css css3 html

本文链接：https://blog.csdn.net/weixin_41012767/article/details/128164473

版权

vue3 专栏收录该内容

14 篇文章 2 订阅

订阅专栏

/* 表格颜色修改 */
  .table {
      margin: 20px;
      padding: 20px;
      height: 88vh;
  }
  .table-striped {

    background-color: #f7f9fa;
  }
  .ant-table {

    border-top: 1px solid rgb(0,0,0,0.06);
    border-bottom: 1px solid rgb(0,0,0,0.06);
  }
  .ant-table-tbody tr td {
    /* 表格身体背景颜色 */
    background: #f5fbfb;
    border: 0;
  }
  .ant-table td {
    white-space: nowrap;
  }
  .ant-table-thead tr th {
    color:white;
    /* //表头背景 */
    background-color: #5fa0a8!important;
    border: 0;
  }
  th.ant-table-selection-column {
    color: #000000;
    background: #000000!important;
    background-color:#000000!important;
  }
  .ant-table-header {
    /* //表头右上角背景 */
    background-color: #5fa0a8!important;
  }
  .ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-item-selected{

    color: #bbdee3;
  }
  .ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-item-selected::after{

    border-bottom: 2px solid #bbdee3;
}

  /* 悬停颜色 */
  .ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-item:hover{

    color: #bbdee3;
  }
    /* 悬停下面横线颜色 */
  .ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-item:hover::after {
    color: #bbdee3;
    border-bottom: 2px solid #bbdee3;

}
.ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-active{

  color: #bbdee3;
}
.ant-menu-item:hover::after {
  border-bottom: 0px solid #fff;
}