ant table(表格) :CSS选择器

1,164 阅读1分钟

1,设置表格的斑马纹的效果

//这是第一行改变颜色
::v-deep .ant-table-tbody .ant-table-row:nth-child(odd) {
   background-color: #f6f5f6;
}
// 这是第二行改变颜色
::v-deep .ant-table-tbody .ant-table-row:nth-child(even) {
    background-color: #f6f5f6;
}

2.改变表格标题头部的颜色和其他样式

::v-deep .ant-table-thead > tr > th {
  padding-left: ;
  font-size: ;
  color: ;
  background:    !important;   //如果不生效 记得加后面的这个important

3,如果想改表格的高度

/deep/.ant-table-tbody {
  min-height: 20px;
}

4,改变hover

:deep(.ant-table-tbody
    > tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected)
    > td) {
  @apply bg-[#EAF5FF];
}

5,设置表格整体的颜色,字体

.ant-table-striped :deep(td) {
  @apply border-none text-[14px] bg-[#F0F4F8]  bg-opacity-[0.35] leading-5 !text-[#666666];
}