tcs-front-tabler/scss/table.scss

/* 添加卡片占满容器的样式 */
.tcs-card-full {
  flex: 1;
  display: flex;
  flex-direction: column;
  margin-bottom: 0;
  overflow: hidden;
}

/* 让卡片体占满剩余空间并允许滚动 */
.tcs-card-full .card-body {
  flex: 1;
  overflow: hidden;
  padding: 0;
  position: relative; /* 添加相对定位 */
}

/* 修改表格响应式容器样式 */
.tcs-card-full .table-responsive {
  position: absolute; /* 使用绝对定位 */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow-y: auto;
  overflow-x: auto;
}

/* 固定表头 */
.tcs-card-full .table thead {
  position: sticky;
  top: 0;
  z-index: 1;
  background-color: var(--tblr-bg-surface);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
}

/* 确保表格占满容器宽度 */
.tcs-card-full .table {
  margin-bottom: 0;
  width: 100%;
  border-collapse: separate; /* 确保边框正确显示 */
  border-spacing: 0;
}

/* 确保表格行有边框 */
.tcs-card-full .table tbody tr {
  border-bottom: 1px solid var(--tblr-border-color);
}

/* 设置表格行悬停效果 */
.tcs-card-full .table tbody tr:hover {
  background-color: rgba(var(--tblr-primary-rgb), 0.05);
}

/* 添加表格头和内容居中的样式 */
.tcs-card-full .table th,
.tcs-card-full .table td {
  text-align: center;
  vertical-align: middle;
}

/* 添加卡片头部和底部紧凑样式 */
.tcs-card-header-compact {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.tcs-card-footer-compact {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

/* 添加表格行紧凑样式 */
.tcs-table-compact th,
.tcs-table-compact td {
  padding-top: 0.4rem;
  padding-bottom: 0.4rem;
}

/* 调整表格内进度条的大小 */
.tcs-table-compact .progress-xs {
  margin-top: 0.2rem;
  margin-bottom: 0.2rem;
}

/* 调整表格内文字间距 */
.tcs-table-compact .clearfix {
  margin-bottom: 0.1rem;
}
/* 确保取消按钮样式正确 */
.btn.tcs-table-oper-btn {
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
}
/* 添加时间列宽度样式 */
.tcs-table-time-column {
  width: 9.375rem; /* 150px / 16 = 9.375rem */
  min-width: 9.375rem; /* 150px / 16 = 9.375rem */
  white-space: nowrap;
}

/* 确保时间列内容不会换行 */
.tcs-table-time-column span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 添加操作列宽度样式 */
.tcs-table-action-column {
  width: 12.5rem; /* 200px / 16 = 12.5rem */
  min-width: 12.5rem; /* 200px / 16 = 12.5rem */
  text-align: center;
}

/* 调整操作按钮样式 */
.tcs-table-action-column .btn {
  display: inline-block;
  margin: 0 auto;
}

/* ID列宽度 */
.tcs-table-id-column {
  width: 6.25rem; /* 100px / 16 = 6.25rem */
  min-width: 6.25rem; /* 100px / 16 = 6.25rem */
}

/* 状态列宽度 */
.tcs-table-status-column {
  width: 6.25rem; /* 100px / 16 = 6.25rem */
  min-width: 6.25rem; /* 100px / 16 = 6.25rem */
  text-align: center;
}
/* order 从、到、货物列宽度 */
.tcs-table-from-column,
.tcs-table-to-column,
.tcs-table-goods-column {
  /* 120px / 16 = 7.5rem */
  min-width: 7.5rem; /* 120px / 16 = 7.5rem */
}
/* 报警列宽度 */
/* 来源列宽度 */
.tcs-table-source-column {
  min-width: 6.875rem; /* 110px / 16 = 6.875rem */
}

/* 级别列宽度 */
.tcs-table-level-column {
  min-width: 5rem; /* 80px / 16 = 5rem */
  text-align: center;
}

/* 事件列宽度 */
.tcs-table-event-column {
  min-width: 7.5rem; /* 120px / 16 = 7.5rem */
}

/* 地图列宽度 */
.tcs-table-map-column {
  min-width: 6.25rem; /* 100px / 16 = 6.25rem */
}
/* 区域列宽度 */
.tcs-table-area-column {
  min-width: 5.625rem; /* 90px / 16 = 5.625rem */
}

/* 名称列宽度 */
.tcs-table-name-column {
  min-width: 5.625rem; /* 90px / 16 = 5.625rem */
}

/* 描述列宽度 */
.tcs-table-desc-column {
  min-width: 5rem; /* 80px / 16 = 5rem */
}

/* 类型列宽度 */
.tcs-table-type-column {
  min-width: 5rem; /* 80px / 16 = 5rem */
}

/* 版本列宽度 */
.tcs-table-version-column {
  min-width: 6.25rem; /* 100px / 16 = 6.25rem */
}
.tcs-table-battery-column {
  min-width: 9.375rem; /* 150px / 16 = 9.375rem */
}
 /* 类型列最小宽度 */
 .tcs-table-type-column {
  min-width: 7.5rem;      /* 120px / 16 = 7.5rem */
}

/* 用户名列最小宽度 */
.tcs-table-username-column {
  min-width: 7.5rem;      /* 120px / 16 = 7.5rem */
}

/* 说明列最小宽度 */
.tcs-table-desc-column {
  min-width: 15.5rem;     /* 200px / 16 = 12.5rem */
}