UI设计规范及说明

Appearance

DataEntry 数据录入

DataEntry2 数据录入2

Table 表格 ​

*UI备注

此模块为须严格遵守设计规范的模块

表格常用于展示同类结构下的多种数据,易于组织、对比和分析等,并可对数据进行搜索、筛选、排序等操作。一般包括表头、数据行和表尾三部分

表格内容有居中、居左、居右默认使用居左(可以根据自己实际需求进行选择)

CSS样式 ​

全部 table 样式代码:

查看代码
css
/* HnuiIcon */
@import url('./icon.css');

/* 全局css变量 */

:root {
  /* #region vars-BrandColor */

  /* 品牌色 */
  --hnui-brand-color: #1f78ff;
  --hnui-brand-color1: #005ce5;
  --hnui-brand-color2: #4b83f7;
  --hnui-brand-color3: #3384ff;
  --hnui-brand-color4: #599bff;
  --hnui-brand-color5: #80b2ff;
  --hnui-brand-color6: #b2d1ff;
  --hnui-brand-color7: #cce0ff;
  --hnui-brand-color8: #d9e8ff;
  --hnui-brand-color9: #ebf3ff;
  --hnui-brand-color10: #f2f7ff;

  /* 状态颜色 */
  --hnui-brand-color-normal: var(--hnui-brand-color);
  --hnui-brand-color-hover: var(--hnui-brand-color3);
  --hnui-brand-color-active: var(--hnui-brand-color1);
  --hnui-brand-color-elected: var(--hnui-brand-color9);
  --hnui-brand-color-disabled: var(--hnui-brand-color7);

  --hnui-brand-color-disabled-border: var(--hnui-brand-color6);
  --hnui-brand-color-disabled-bg: var(--hnui-brand-color10);

  /* #endregion vars-BrandColor */

  /* #region vars-DomainColor */

  /* 功能色 */
  --hnui-success-color: #2ba471;
  --hnui-success-hover-color: #51bd90;
  --hnui-success-active-color: #2ba471;

  --hnui-warning-color: #faad14;
  --hnui-warning-hover-color: #ffc146;
  --hnui-warning-active-color: #db960b;

  --hnui-danger-color: #ff4d4d;
  --hnui-danger-hover-color: #ff7676;
  --hnui-danger-active-color: #d82a2a;

  --hnui-info-color: #8d97a6;
  --hnui-info-hover-color: #b2b7c0;
  --hnui-info-active-color: #707a89;

  /* #endregion vars-DomainColor */

  /* #region vars-NeutralColor */
  /* 中性色 */

  /* 标题文字 */
  --hnui-neutral-color-1: #2d2e33;

  /* 正文、重要信息文字、按钮文字、输入框正常状态文字等 */
  --hnui-neutral-color-2: #43454d;

  /* 内容文字、说明叙述文字 */
  --hnui-neutral-color-3: #5d606a;

  /* 提示性文字、辅助文本 */
  --hnui-neutral-color-4: #9298a0;

  /* 禁用文本 */
  --hnui-neutral-color-5: #b7bdc7;

  /* 描边格描边、输入文本描边、下拉选择描边等 */
  --hnui-neutral-color-6: #dfe2e7;

  /* 全局背景、禁用状态、分割线等 */
  --hnui-neutral-color-7: #f0f2f5;

  /* 最低颜色等 */
  --hnui-neutral-color-8: #fafbfc;

  /* #endregion vars-NeutralColor */

  /* 默认文字颜色 */
  --hnui-text-color: var(--hnui-neutral-color-2);

  --hnui-info-bg: #eceff4;
  --hnui-info-bg2: #e7e7e7;

  --hnui-color-white: #fff;
  --hnui-color-black: #000;

  --hnui-border-width: 1px;
  --hnui-border-dashed-width: 2px;
  --hnui-border-color: var(--hnui-neutral-color-6);

  --hnui-disabled-bg-color: var(--hnui-neutral-color-7);
  --hnui-disabled-color: var(--hnui-neutral-color-5);

  --hnui-control-height: 32px;
  --hnui-control-height-sm: 24px;
  --hnui-control-height-lg: 40px;

  --hnui-control-transparent: transparent;
}

.dark {
  --hnui-brand-color6: rgb(50, 59, 74);
  --hnui-brand-color7: #30353d;
  --hnui-brand-color8: #42484f;
  --hnui-brand-color9: #4c4f54;
  --hnui-brand-color10: #29292c;

  /* 中性色 */

  /* 标题文字 */
  --hnui-neutral-color-1: #c4c8dc;

  /* 正文、重要信息文字、按钮文字、输入框正常状态文字等 */
  --hnui-neutral-color-2: #b9bed3;

  /* 内容文字、说明叙述文字 */
  --hnui-neutral-color-3: #afb5c7;

  /* 提示性文字、辅助文本 */
  --hnui-neutral-color-4: #6a6f75;

  /* 禁用文本 */
  --hnui-neutral-color-5: #53565b;

  /* 描边格描边、输入文本描边、下拉选择描边等 */
  --hnui-neutral-color-6: #59595a;

  /* 全局背景、禁用状态、分割线等 */
  --hnui-neutral-color-7: #343535;

  /* 最低颜色等 */
  --hnui-neutral-color-8: #151516;

  --hnui-info-bg: #393b3d;

  --hnui-color-white: #000;
  --hnui-color-black: #fff;

  --hnui-control-transparent: transparent;
}

*,
::before,
::after {
  box-sizing: border-box;
}

body {
  color: var(--hnui-neutral-color-2);
}

/* #region vars-FontFamily */
@font-face {
  font-family: 'DIN';
  src: url('/fonts/D-DIN-PRO/D-DIN-PRO.woff2') format('woff2'),
    url('/fonts/D-DIN-PRO/D-DIN-PRO.woff') format('woff'),
    url('/fonts/D-DIN-PRO/D-DIN-PRO.ttf') format('truetype'),
    url('/fonts/D-DIN-PRO/D-DIN-PRO.eot') format('embedded-opentype'),
    url('/fonts/D-DIN-PRO/D-DIN-PRO.svg') format('svg');
  font-weight: normal;
  font-style: normal;
}

/* 使用数字字体 */
.use-font {
  font-family: DIN;
}
/* #endregion vars-FontFamily */

/* #region vars-BoxShadow */
/* 一级投影（默认向下） */
.hnui-box-shadow {
  box-shadow: 0px 6px 16px 6px rgba(0, 0, 0, 0.18);
}
.hnui-box-shadow.hover,
.hnui-box-shadow:hover {
  box-shadow: 0px 6px 16px 6px rgba(31, 120, 255, 0.18);
}

/* 二级投影（默认向下） */
.hnui-box-shadow_l2 {
  box-shadow: 0px 6px 16px 6px rgba(0, 0, 0, 0.12);
}
.hnui-box-shadow_l2.hover,
.hnui-box-shadow_l2:hover {
  box-shadow: 0px 6px 16px 6px rgba(31, 120, 255, 0.12);
}

/* 三级投影（默认向下） */
.hnui-box-shadow_l3 {
  box-shadow: 0px 6px 16px 6px rgba(0, 0, 0, 0.06);
}
.hnui-box-shadow_l3.hover,
.hnui-box-shadow_l3:hover {
  box-shadow: 0px 6px 16px 6px rgba(31, 120, 255, 0.06);
}
/* #endregion vars-BoxShadow */
css
@import url("../vars.css");

/* ============================================
   表格容器
   ============================================ */
.hnui-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 14px;
  color: var(--hnui-text-color);
  background-color: transparent;
  margin: 0 !important;
}


.hnui-table-wrapper {
  display: flex;
  flex-direction: column;
}


/* 滚动条样式 */
.hnui-table-wrapper::-webkit-scrollbar {
  height: 8px;
}

.hnui-table-wrapper::-webkit-scrollbar-track {
  background: var(--hnui-neutral-color-7);
  border-radius: 4px;
}

.hnui-table-wrapper::-webkit-scrollbar-thumb {
  background: var(--hnui-neutral-color-5);
  border-radius: 4px;
}

.hnui-table-wrapper::-webkit-scrollbar-thumb:hover {
  background: var(--hnui-neutral-color-4);
}

/* ============================================
   表头
   ============================================ */
.hnui-table thead {
  background-color: #F5F7FA;
}

.hnui-table th {
  padding: 12px 16px;
  height: 40px;
  text-align: left;
  font-weight: 400;
  color: var(--hnui-text-color);
  border: 1px solid #DFE2E7;
  border-left: none;
  white-space: nowrap;
  background-color: #ebeff5;
}

.hnui-table th:first-child {
  border-left: 1px solid #DFE2E7;
}

/* 表头排序图标 */
.hnui-table-sort-icon {
  display: inline-flex;
  flex-direction: column;
  margin-left: 4px;
  position: relative;
  height: 20px;
  width: 20px;
}

.hnui-table-sort-icon .hnui-icon-chevron-up {
  position: absolute;
  left: 0;
  top: 1px;
}

.hnui-table-sort-icon .hnui-icon-chevron-down {
  position: absolute;
  left: 0;
  bottom: 5px;
}

.hnui-table-sort-icon .hnui-icon {
  height: 8px;
}

/* ============================================
   表体
   ============================================ */
.hnui-table tbody tr {
  transition: background-color 0.2s ease;
}

.hnui-table tbody tr:hover {
  background-color: var(--hnui-neutral-color-7);
}

.hnui-table tbody tr:hover td {
  background-color: var(--hnui-neutral-color-7);
}

.hnui-table td {
  padding: 0 12px;
  height: 40px;
  line-height: 40px;
  border: 1px solid #DFE2E7;
  border-left: none;
  border-top: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background: var(--hnui-color-white);
}

.hnui-table td:first-child {
  border-left: 1px solid #DFE2E7;
}


.hnui-table-striped tbody tr:nth-child(odd) td {
  background-color: #F5F7FA !important;
  /* 奇数行的背景色 */
}

.hnui-table-striped tbody tr:nth-child(even) td {
  background-color: #FAFBFC !important;
  /* 偶数行的背景色 */
}

.hnui-table-footer {
  border: 1px solid #DFE2E7;
  border-top: none;
  padding: 12px;
}

/* 文字换行 */
.hnui-table.wrap td {
  white-space: normal;
  word-break: break-all;
}

/* ============================================
   尺寸变体
   ============================================ */

/* 小尺寸 */
.hnui-table-sm th,
.hnui-table-sm td {
  padding: 0 12px;
  height: 36px;
}

/* 大尺寸 */
.hnui-table-lg th,
.hnui-table-lg td {
  padding: 0 24px;
  height: 52px;
}

/* 紧凑型 */
.hnui-table-compact th,
.hnui-table-compact td {
  padding: 8px 12px;
  height: 32px;
}

/* ============================================
   单元格内容展示
   ============================================ */
.hnui-table-cell {
  display: flex;
  align-items: center;
  width: 240px;
  height: 48px;
  padding: 0 16px;
  border: 1px solid #DFE2E7;
  background-color: #fff;
  font-size: 14px;
  color: var(--hnui-text-color);
}

.hnui-table-cell-lg {
  height: 52px;
  padding: 0 24px;
}

.hnui-table-cell-sm {
  height: 36px;
  padding: 0 12px;
}

/* 深色表头 */
.hnui-table-dark-header thead {
  background-color: #E8EAED;
}

.hnui-table-dark-header th {
  color: var(--hnui-text-color);
  font-weight: 500;
}

/* ============================================
   选中状态
   ============================================ */
.hnui-table tbody tr.is-selected {
  background-color: #D9E8FF;
}

.hnui-table tbody tr.is-selected td {
  background-color: #D9E8FF;
}

.hnui-table tbody tr.is-selected:hover {
  background-color: #CCE0FF;
}

.hnui-table tbody tr.is-selected:hover td {
  background-color: #CCE0FF;
}

/* ============================================
   自定义单元格颜色
   ============================================ */

/* 浅色系 */
.hnui-table tbody .hnui-table-cell-color-yellow-light {
  background-color: #FEF6E5 !important;
}

.hnui-table tbody .hnui-table-cell-color-green-light {
  background-color: #2BA471 !important;
  color: #fff !important;
}

.hnui-table tbody .hnui-table-cell-color-red-light {
  background-color: #FEDCDC !important;
}

.hnui-table tbody .hnui-table-cell-color-blue-light {
  background-color: #CCE0FF !important;
}

.hnui-table tbody .hnui-table-cell-color-gray-light {
  background-color: #F5F7FA !important;
}

/* 中色系 */
.hnui-table tbody .hnui-table-cell-color-yellow-medium {
  background-color: #FEF6E5;
}

.hnui-table tbody .hnui-table-cell-color-green-medium {
  background-color: #2BA471;
  color: #fff;
}

.hnui-table tbody .hnui-table-cell-color-red-medium {
  background-color: #FEEDED;
}

.hnui-table tbody .hnui-table-cell-color-blue-medium {
  background-color: #E9F1FF;
}

.hnui-table tbody .hnui-table-cell-color-gray-medium {
  background-color: #FAFBFC;
}

/* 深色系 */
.hnui-table tbody .hnui-table-cell-color-yellow-deep {
  background-color: #FFFBF3;
}

.hnui-table tbody .hnui-table-cell-color-green-deep {
  background-color: #F4FAF8;
}

.hnui-table tbody .hnui-table-cell-color-red-deep {
  background-color: #FFF6F6;
}

.hnui-table tbody .hnui-table-cell-color-blue-deep {
  background-color: #F4F8FF;
}

/* 高亮色 */
.hnui-table tbody .hnui-table-cell-highlight-warning {
  background-color: #FAAD14;
  color: #fff;
  border-radius: 4px;
  padding: 2px 8px;
  display: inline-block;
}

.hnui-table tbody .hnui-table-cell-highlight-primary {
  background-color: #1F78FF;
  color: #fff;
  border-radius: 4px;
  padding: 2px 8px;
  display: inline-block;
}

.hnui-table tbody .hnui-table-cell-highlight-danger {
  background-color: #FF4D4D;
  color: #fff;
  border-radius: 4px;
  padding: 2px 8px;
  display: inline-block;
}

/* ============================================
   加载状态
   ============================================ */
.hnui-table-loading {
  position: relative;
  min-height: 200px;
}

.hnui-table-footer-loading {
  width: 100%;
  text-align: center;
  margin-bottom: 16px;
}

.hnui-table-loading-spinner {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--hnui-brand-color);
  font-size: 14px;
}

.hnui-table-loading-icon {
  width: 24px;
  height: 24px;
  border: 2px solid var(--hnui-neutral-color-6);
  border-top-color: var(--hnui-brand-color);
  border-radius: 50%;
  animation: hnui-table-spin 0.8s linear infinite;
}

@keyframes hnui-table-spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/* ============================================
   复选框列
   ============================================ */
.hnui-table-checkbox {
  width: 40px;
  text-align: center;
}

/* ============================================
   固定列
   ============================================ */

/* 右侧固定列 */
.hnui-table th.hnui-table-fixed-right,
.hnui-table td.hnui-table-fixed-right {
  position: sticky;
  right: 0;
  z-index: 2;
  border-left: 1px solid #DFE2E7;
}

/* ============================================
   操作列
   ============================================ */
.hnui-table-actions {
  display: flex;
  gap: 16px;
}

.hnui-table-action-link {
  color: var(--hnui-brand-color);
  cursor: pointer;
  text-decoration: none;
  transition: color 0.2s ease;
}

.hnui-table-action-link:hover {
  color: var(--hnui-brand-color-hover);
}

.hnui-table-footer-loading-center {
  margin: 48px 0;
}

/* ============================================
   空状态
   ============================================ */
.hnui-table-empty {
  text-align: center;
  padding: 48px 16px;
  color: var(--hnui-neutral-color-4);
}

/* ============================================
   暗色模式适配
   ============================================ */
.dark .hnui-table {
  color: var(--hnui-neutral-color-2);
}

.dark .hnui-table thead {
  background-color: var(--hnui-neutral-color-7);
}

.dark .hnui-table th {
  color: var(--hnui-neutral-color-2);
  border-color: var(--hnui-neutral-color-6);
}

.dark .hnui-table th:first-child {
  border-left-color: var(--hnui-neutral-color-6);
}

.dark .hnui-table-dark-header thead {
  background-color: var(--hnui-neutral-color-6);
}

.dark .hnui-table td {
  border-color: var(--hnui-neutral-color-6);
  background-color: var(--hnui-neutral-color-8);
}

.dark .hnui-table td:first-child {
  border-left-color: var(--hnui-neutral-color-6);
}

.dark .hnui-table tbody tr:hover {
  background-color: var(--hnui-neutral-color-6);
}

.dark .hnui-table tbody tr:hover td {
  background-color: var(--hnui-neutral-color-6);
}

.dark .hnui-table tbody tr.is-selected {
  background-color: rgba(31, 120, 255, 0.2);
}

.dark .hnui-table tbody tr.is-selected td {
  background-color: rgba(31, 120, 255, 0.2);
}

.dark .hnui-table tbody tr.is-selected:hover {
  background-color: rgba(31, 120, 255, 0.3);
}

.dark .hnui-table tbody tr.is-selected:hover td {
  background-color: rgba(31, 120, 255, 0.3);
}

.dark .hnui-table-wrapper::-webkit-scrollbar-track {
  background: var(--hnui-neutral-color-7);
}

.dark .hnui-table-wrapper::-webkit-scrollbar-thumb {
  background: var(--hnui-neutral-color-5);
}

.dark .hnui-table-wrapper::-webkit-scrollbar-thumb:hover {
  background: var(--hnui-neutral-color-4);
}

.dark .hnui-table-empty {
  color: var(--hnui-neutral-color-4);
}

.dark .hnui-table th.hnui-table-fixed-right,
.dark .hnui-table td.hnui-table-fixed-right {
  background-color: var(--hnui-neutral-color-8);
  border-left-color: var(--hnui-neutral-color-6);
}

基础表格/带下方滚动条 ​

项目名称标签项目名称项目名称项目名称项目名称操作
项目名称
默认标签
项目名称项目名称项目名称项目名称
管理删除
项目名称项目名称项目名称
默认标签
项目名称项目名称项目名称项目名称
管理删除
项目名称
默认标签
项目名称项目名称项目名称项目名称
管理删除
项目名称
默认标签
项目名称项目名称项目名称项目名称
管理删除
项目名称
默认标签
项目名称项目名称项目名称项目名称
管理删除
项目名称
默认标签
项目名称项目名称项目名称项目名称
管理删除
项目名称
默认标签
项目名称项目名称项目名称项目名称
管理删除
项目名称
默认标签
项目名称项目名称项目名称项目名称
管理删除
项目名称
默认标签
项目名称项目名称项目名称项目名称
管理删除
项目名称
默认标签
项目名称项目名称项目名称项目名称
管理删除
共 101 项数据
...
跳至/20 页
查看代码
html
<div class="hnui-table-wrapper">
  <table class="hnui-table hnui-table-sm">
    <thead>
      <tr>
        <th style="width: 40px">
          <div class="hnui-checkbox">
            <input
              class="hnui-checkbox-input"
              type="checkbox"
              name="fieldName"
              id="checkbox1"
              value="1"
            />
          </div>
        </th>
        <th>项目名称</th>
        <th>标签</th>
        <th>项目名称</th>
        <th>项目名称</th>
        <th>项目名称</th>
        <th>项目名称</th>
        <th class="hnui-table-fixed-right">操作</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>
          <div class="hnui-checkbox">
            <input
              class="hnui-checkbox-input"
              type="checkbox"
              name="fieldName"
              id="checkbox1"
              value="1"
            />
          </div>
        </td>
        <td>项目名称</td>
        <td>
          <div class="hnui-tag hnui-tag-light-outline hnui-tag-success">默认标签</div>
        </td>
        <td>项目名称</td>
        <td>项目名称</td>
        <td>项目名称</td>
        <td>项目名称</td>
        <td class="hnui-table-fixed-right">
          <div class="hnui-table-actions">
            <a href="javascript:;" class="hnui-link hnui-link-primary">管理</a>
            <a href="javascript:;" class="hnui-link hnui-link-primary">删除</a>
          </div>
        </td>
      </tr>
      <tr>
        <td>
          <div class="hnui-checkbox">
            <input
              class="hnui-checkbox-input"
              type="checkbox"
              name="fieldName"
              value="1"
            />
          </div>
        </td>
        <td>项目名称项目名称项目名称</td>
        <td>
          <div class="hnui-tag hnui-tag-light-outline hnui-tag-success">默认标签</div>
        </td>
        <td>项目名称</td>
        <td>项目名称</td>
        <td>项目名称</td>
        <td>项目名称</td>
        <td class="hnui-table-fixed-right">
          <div class="hnui-table-actions">
            <a href="javascript:;" class="hnui-link hnui-link-primary">管理</a>
            <a href="javascript:;" class="hnui-link hnui-link-primary">删除</a>
          </div>
        </td>
      </tr>
      <tr>
        <td>
          <div class="hnui-checkbox">
            <input
              class="hnui-checkbox-input"
              type="checkbox"
              name="fieldName"
              value="1"
            />
          </div>
        </td>
        <td>项目名称</td>
        <td>
          <div class="hnui-tag hnui-tag-light-outline hnui-tag-success">默认标签</div>
        </td>
        <td>项目名称</td>
        <td>项目名称</td>
        <td>项目名称</td>
        <td>项目名称</td>
        <td class="hnui-table-fixed-right">
          <div class="hnui-table-actions">
            <a href="javascript:;" class="hnui-link hnui-link-primary">管理</a>
            <a href="javascript:;" class="hnui-link hnui-link-primary">删除</a>
          </div>
        </td>
      </tr>
      <tr>
        <td>
          <div class="hnui-checkbox">
            <input
              class="hnui-checkbox-input"
              type="checkbox"
              name="fieldName"
              value="1"
            />
          </div>
        </td>
        <td>项目名称</td>
        <td>
          <div class="hnui-tag hnui-tag-light-outline hnui-tag-success">默认标签</div>
        </td>
        <td>项目名称</td>
        <td>项目名称</td>
        <td>项目名称</td>
        <td>项目名称</td>
        <td class="hnui-table-fixed-right">
          <div class="hnui-table-actions">
            <a href="javascript:;" class="hnui-link hnui-link-primary">管理</a>
            <a href="javascript:;" class="hnui-link hnui-link-primary">删除</a>
          </div>
        </td>
      </tr>
      <tr>
        <td>
          <div class="hnui-checkbox">
            <input
              class="hnui-checkbox-input"
              type="checkbox"
              name="fieldName"
              value="1"
            />
          </div>
        </td>
        <td>项目名称</td>
        <td>
          <div class="hnui-tag hnui-tag-light-outline hnui-tag-success">默认标签</div>
        </td>
        <td>项目名称</td>
        <td>项目名称</td>
        <td>项目名称</td>
        <td>项目名称</td>
        <td class="hnui-table-fixed-right">
          <div class="hnui-table-actions">
            <a href="javascript:;" class="hnui-link hnui-link-primary">管理</a>
            <a href="javascript:;" class="hnui-link hnui-link-primary">删除</a>
          </div>
        </td>
      </tr>
      <tr>
        <td>
          <div class="hnui-checkbox">
            <input
              class="hnui-checkbox-input"
              type="checkbox"
              name="fieldName"
              value="1"
            />
          </div>
        </td>
        <td>项目名称</td>
        <td>
          <div class="hnui-tag hnui-tag-light-outline hnui-tag-success">默认标签</div>
        </td>
        <td>项目名称</td>
        <td>项目名称</td>
        <td>项目名称</td>
        <td>项目名称</td>
        <td class="hnui-table-fixed-right">
          <div class="hnui-table-actions">
            <a href="javascript:;" class="hnui-link hnui-link-primary">管理</a>

            <a href="javascript:;" class="hnui-link hnui-link-primary">删除</a>
          </div>
        </td>
      </tr>
      <tr>
        <td>
          <div class="hnui-checkbox">
            <input
              class="hnui-checkbox-input"
              type="checkbox"
              name="fieldName"
              value="1"
            />
          </div>
        </td>
        <td>项目名称</td>
        <td>
          <div class="hnui-tag hnui-tag-light-outline hnui-tag-success">默认标签</div>
        </td>
        <td>项目名称</td>
        <td>项目名称</td>
        <td>项目名称</td>
        <td>项目名称</td>
        <td class="hnui-table-fixed-right">
          <div class="hnui-table-actions">
            <a href="javascript:;" class="hnui-link hnui-link-primary">管理</a>
            <a href="javascript:;" class="hnui-link hnui-link-primary">删除</a>
          </div>
        </td>
      </tr>
      <tr>
        <td>
          <div class="hnui-checkbox">
            <input
              class="hnui-checkbox-input"
              type="checkbox"
              name="fieldName"
              value="1"
            />
          </div>
        </td>
        <td>项目名称</td>
        <td>
          <div class="hnui-tag hnui-tag-light-outline hnui-tag-success">默认标签</div>
        </td>
        <td>项目名称</td>
        <td>项目名称</td>
        <td>项目名称</td>
        <td>项目名称</td>
        <td class="hnui-table-fixed-right">
          <div class="hnui-table-actions">
            <a href="javascript:;" class="hnui-link hnui-link-primary">管理</a>
            <a href="javascript:;" class="hnui-link hnui-link-primary">删除</a>
          </div>
        </td>
      </tr>
      <tr>
        <td>
          <div class="hnui-checkbox">
            <input
              class="hnui-checkbox-input"
              type="checkbox"
              name="fieldName"
              value="1"
            />
          </div>
        </td>
        <td>项目名称</td>
        <td>
          <div class="hnui-tag hnui-tag-light-outline hnui-tag-success">默认标签</div>
        </td>
        <td>项目名称</td>
        <td>项目名称</td>
        <td>项目名称</td>
        <td>项目名称</td>
        <td class="hnui-table-fixed-right">
          <div class="hnui-table-actions">
            <a href="javascript:;" class="hnui-link hnui-link-primary">管理</a>
            <a href="javascript:;" class="hnui-link hnui-link-primary">删除</a>
          </div>
        </td>
      </tr>
      <tr>
        <td>
          <div class="hnui-checkbox">
            <input
              class="hnui-checkbox-input"
              type="checkbox"
              name="fieldName"
              value="1"
            />
          </div>
        </td>
        <td>项目名称</td>
        <td>
          <div class="hnui-tag hnui-tag-light-outline hnui-tag-success">默认标签</div>
        </td>
        <td>项目名称</td>
        <td>项目名称</td>
        <td>项目名称</td>
        <td>项目名称</td>
        <td class="hnui-table-fixed-right">
          <div class="hnui-table-actions">
            <a href="javascript:;" class="hnui-link hnui-link-primary">管理</a>
            <a href="javascript:;" class="hnui-link hnui-link-primary">删除</a>
          </div>
        </td>
      </tr>
    </tbody>
  </table>
  <div class="hnui-table-footer">
    <div class="hnui-pagination hnui-pagination-small">
      <span class="hnui-pagination-total">共 101 项数据</span>
      <div class="hnui-pagination-sizes">
        <select class="hnui-pagination-sizes-select">
          <option>10 条/页</option>
          <option>20 条/页</option>
          <option>50 条/页</option>
          <option>100 条/页</option>
        </select>
      </div>
      <button class="hnui-pagination-prev is-disabled">
        <i class="hnui-icon hnui-icon-chevron-right"></i>
      </button>
      <button class="hnui-pagination-item is-active">1</button>
      <button class="hnui-pagination-item">2</button>
      <button class="hnui-pagination-item">3</button>
      <button class="hnui-pagination-item">4</button>
      <button class="hnui-pagination-item">5</button>
      <span class="hnui-pagination-jumper">...</span>
      <button class="hnui-pagination-item">11</button>
      <button class="hnui-pagination-next">
        <i class="hnui-icon hnui-icon-chevron-right"></i>
      </button>
      <div class="hnui-pagination-jump">
        <span class="hnui-pagination-jump-text">跳至</span>
        <input type="text" class="hnui-pagination-jump-input" value="11" />
        <span class="hnui-pagination-jump-suffix">/20 页</span>
      </div>
    </div>
  </div>
</div>

单元格内容展示 ​

哇大大
大尺寸 高52PX文本左右间距24PX
项目名称
中尺寸 高48PX文本左右间距16PX
项目名称
小尺寸 高36PX文本左右间距12PX
查看代码
html
<!-- 大尺寸 -->
<div style="display: flex; align-items: center; gap: 24px">
  <div class="hnui-table-cell hnui-table-cell-lg">哇大大</div>
  <span style="color: #ff6b6b; font-size: 14px">大尺寸 高52PX文本左右间距24PX</span>
</div>

<!-- 中尺寸 -->
<div style="display: flex; align-items: center; gap: 24px">
  <div class="hnui-table-cell">项目名称</div>
  <span style="color: #ff6b6b; font-size: 14px">中尺寸 高48PX文本左右间距16PX</span>
</div>

<!-- 小尺寸 -->
<div style="display: flex; align-items: center; gap: 24px">
  <div class="hnui-table-cell hnui-table-cell-sm">项目名称</div>
  <span style="color: #ff6b6b; font-size: 14px">小尺寸 高36PX文本左右间距12PX</span>
</div>

斑马表格/加载/文字不换行 ​

 项目名称 标签 项目名称 项目名称 项目名称 项目名称 操作
项目名称
默认标签
项目名称项目名称项目名称项目名称
管理删除
项目名称项目名称项目名称
默认标签
项目名称项目名称项目名称项目名称
管理删除
项目名称
默认标签
项目名称项目名称项目名称项目名称
管理删除
项目名称
默认标签
项目名称项目名称项目名称项目名称
管理删除
项目名称
默认标签
项目名称项目名称项目名称项目名称
管理删除
项目名称
默认标签
项目名称项目名称项目名称项目名称
管理删除
项目名称
默认标签
项目名称项目名称项目名称项目名称
管理删除
项目名称
默认标签
项目名称项目名称项目名称项目名称
管理删除
项目名称
默认标签
项目名称项目名称项目名称项目名称
管理删除
项目名称
默认标签
项目名称项目名称项目名称项目名称
管理删除
共 101 项数据
...
跳至/20 页
查看代码
html

<div class="hnui-table-wrapper">
  <table class="hnui-table hnui-table-sm hnui-table-striped">
    <thead>
      <tr>
        <th style="width: 40px">
          <div class="hnui-checkbox">
            <input
              class="hnui-checkbox-input"
              type="checkbox"
              name="fieldName"
              id="checkbox1"
              value="1"
            />
          </div>
        </th>
        <th>
          项目名称
          <span class="hnui-table-sort-icon">
            <i class="hnui-icon hnui-icon-chevron-up"></i>
            <i class="hnui-icon hnui-icon-chevron-down"></i>
          </span>
        </th>
        <th>
          标签
          <span class="hnui-table-sort-icon">
            <i class="hnui-icon hnui-icon-chevron-up"></i>
            <i class="hnui-icon hnui-icon-chevron-down"></i>
          </span>
        </th>
        <th>
          项目名称
          <span class="hnui-table-sort-icon">
            <i class="hnui-icon hnui-icon-chevron-up"></i>
            <i class="hnui-icon hnui-icon-chevron-down"></i>
          </span>
        </th>
        <th>
          项目名称
          <span class="hnui-table-sort-icon">
            <i class="hnui-icon hnui-icon-chevron-up"></i>
            <i class="hnui-icon hnui-icon-chevron-down"></i>
          </span>
        </th>
        <th>
          项目名称
          <span class="hnui-table-sort-icon">
            <i class="hnui-icon hnui-icon-chevron-up"></i>
            <i class="hnui-icon hnui-icon-chevron-down"></i>
          </span>
        </th>
        <th>
          项目名称
          <span class="hnui-table-sort-icon">
            <i class="hnui-icon hnui-icon-chevron-up"></i>
            <i class="hnui-icon hnui-icon-chevron-down"></i>
          </span>
        </th>
        <th class="hnui-table-fixed-right">操作</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>
          <div class="hnui-checkbox">
            <input
              class="hnui-checkbox-input"
              type="checkbox"
              name="fieldName"
              id="checkbox1"
              value="1"
            />
          </div>
        </td>
        <td>项目名称</td>
        <td>
          <div class="hnui-tag hnui-tag-light-outline hnui-tag-success">默认标签</div>
        </td>
        <td>项目名称</td>
        <td>项目名称</td>
        <td>项目名称</td>
        <td>项目名称</td>
        <td class="hnui-table-fixed-right">
          <div class="hnui-table-actions">
            <a href="javascript:;" class="hnui-link hnui-link-primary">管理</a>
            <a href="javascript:;" class="hnui-link hnui-link-primary">删除</a>
          </div>
        </td>
      </tr>
      <tr>
        <td>
          <div class="hnui-checkbox">
            <input
              class="hnui-checkbox-input"
              type="checkbox"
              name="fieldName"
              value="1"
            />
          </div>
        </td>
        <td>项目名称项目名称项目名称</td>
        <td>
          <div class="hnui-tag hnui-tag-light-outline hnui-tag-success">默认标签</div>
        </td>
        <td>项目名称</td>
        <td>项目名称</td>
        <td>项目名称</td>
        <td>项目名称</td>
        <td class="hnui-table-fixed-right">
          <div class="hnui-table-actions">
            <a href="javascript:;" class="hnui-link hnui-link-primary">管理</a>
            <a href="javascript:;" class="hnui-link hnui-link-primary">删除</a>
          </div>
        </td>
      </tr>
      <tr>
        <td>
          <div class="hnui-checkbox">
            <input
              class="hnui-checkbox-input"
              type="checkbox"
              name="fieldName"
              value="1"
            />
          </div>
        </td>
        <td>项目名称</td>
        <td>
          <div class="hnui-tag hnui-tag-light-outline hnui-tag-success">默认标签</div>
        </td>
        <td>项目名称</td>
        <td>项目名称</td>
        <td>项目名称</td>
        <td>项目名称</td>
        <td class="hnui-table-fixed-right">
          <div class="hnui-table-actions">
            <a href="javascript:;" class="hnui-link hnui-link-primary">管理</a>
            <a href="javascript:;" class="hnui-link hnui-link-primary">删除</a>
          </div>
        </td>
      </tr>
      <tr>
        <td>
          <div class="hnui-checkbox">
            <input
              class="hnui-checkbox-input"
              type="checkbox"
              name="fieldName"
              value="1"
            />
          </div>
        </td>
        <td>项目名称</td>
        <td>
          <div class="hnui-tag hnui-tag-light-outline hnui-tag-success">默认标签</div>
        </td>
        <td>项目名称</td>
        <td>项目名称</td>
        <td>项目名称</td>
        <td>项目名称</td>
        <td class="hnui-table-fixed-right">
          <div class="hnui-table-actions">
            <a href="javascript:;" class="hnui-link hnui-link-primary">管理</a>
            <a href="javascript:;" class="hnui-link hnui-link-primary">删除</a>
          </div>
        </td>
      </tr>
      <tr>
        <td>
          <div class="hnui-checkbox">
            <input
              class="hnui-checkbox-input"
              type="checkbox"
              name="fieldName"
              value="1"
            />
          </div>
        </td>
        <td>项目名称</td>
        <td>
          <div class="hnui-tag hnui-tag-light-outline hnui-tag-success">默认标签</div>
        </td>
        <td>项目名称</td>
        <td>项目名称</td>
        <td>项目名称</td>
        <td>项目名称</td>
        <td class="hnui-table-fixed-right">
          <div class="hnui-table-actions">
            <a href="javascript:;" class="hnui-link hnui-link-primary">管理</a>
            <a href="javascript:;" class="hnui-link hnui-link-primary">删除</a>
          </div>
        </td>
      </tr>
      <tr>
        <td>
          <div class="hnui-checkbox">
            <input
              class="hnui-checkbox-input"
              type="checkbox"
              name="fieldName"
              value="1"
            />
          </div>
        </td>
        <td>项目名称</td>
        <td>
          <div class="hnui-tag hnui-tag-light-outline hnui-tag-success">默认标签</div>
        </td>
        <td>项目名称</td>
        <td>项目名称</td>
        <td>项目名称</td>
        <td>项目名称</td>
        <td class="hnui-table-fixed-right">
          <div class="hnui-table-actions">
            <a href="javascript:;" class="hnui-link hnui-link-primary">管理</a>

            <a href="javascript:;" class="hnui-link hnui-link-primary">删除</a>
          </div>
        </td>
      </tr>
      <tr>
        <td>
          <div class="hnui-checkbox">
            <input
              class="hnui-checkbox-input"
              type="checkbox"
              name="fieldName"
              value="1"
            />
          </div>
        </td>
        <td>项目名称</td>
        <td>
          <div class="hnui-tag hnui-tag-light-outline hnui-tag-success">默认标签</div>
        </td>
        <td>项目名称</td>
        <td>项目名称</td>
        <td>项目名称</td>
        <td>项目名称</td>
        <td class="hnui-table-fixed-right">
          <div class="hnui-table-actions">
            <a href="javascript:;" class="hnui-link hnui-link-primary">管理</a>
            <a href="javascript:;" class="hnui-link hnui-link-primary">删除</a>
          </div>
        </td>
      </tr>
      <tr>
        <td>
          <div class="hnui-checkbox">
            <input
              class="hnui-checkbox-input"
              type="checkbox"
              name="fieldName"
              value="1"
            />
          </div>
        </td>
        <td>项目名称</td>
        <td>
          <div class="hnui-tag hnui-tag-light-outline hnui-tag-success">默认标签</div>
        </td>
        <td>项目名称</td>
        <td>项目名称</td>
        <td>项目名称</td>
        <td>项目名称</td>
        <td class="hnui-table-fixed-right">
          <div class="hnui-table-actions">
            <a href="javascript:;" class="hnui-link hnui-link-primary">管理</a>
            <a href="javascript:;" class="hnui-link hnui-link-primary">删除</a>
          </div>
        </td>
      </tr>
      <tr>
        <td>
          <div class="hnui-checkbox">
            <input
              class="hnui-checkbox-input"
              type="checkbox"
              name="fieldName"
              value="1"
            />
          </div>
        </td>
        <td>项目名称</td>
        <td>
          <div class="hnui-tag hnui-tag-light-outline hnui-tag-success">默认标签</div>
        </td>
        <td>项目名称</td>
        <td>项目名称</td>
        <td>项目名称</td>
        <td>项目名称</td>
        <td class="hnui-table-fixed-right">
          <div class="hnui-table-actions">
            <a href="javascript:;" class="hnui-link hnui-link-primary">管理</a>
            <a href="javascript:;" class="hnui-link hnui-link-primary">删除</a>
          </div>
        </td>
      </tr>
      <tr>
        <td>
          <div class="hnui-checkbox">
            <input
              class="hnui-checkbox-input"
              type="checkbox"
              name="fieldName"
              value="1"
            />
          </div>
        </td>
        <td>项目名称</td>
        <td>
          <div class="hnui-tag hnui-tag-light-outline hnui-tag-success">默认标签</div>
        </td>
        <td>项目名称</td>
        <td>项目名称</td>
        <td>项目名称</td>
        <td>项目名称</td>
        <td class="hnui-table-fixed-right">
          <div class="hnui-table-actions">
            <a href="javascript:;" class="hnui-link hnui-link-primary">管理</a>
            <a href="javascript:;" class="hnui-link hnui-link-primary">删除</a>
          </div>
        </td>
      </tr>
    </tbody>
  </table>
  <div class="hnui-table-footer">
    <div class="hnui-table-footer-loading">
      <div class="hnui-table-loading-spinner">
        <div class="hnui-table-loading-icon"></div>
        <span>加载中...</span>
      </div>
    </div>
    <div class="hnui-pagination hnui-pagination-small">
      <span class="hnui-pagination-total">共 101 项数据</span>
      <div class="hnui-pagination-sizes">
        <select class="hnui-pagination-sizes-select">
          <option>10 条/页</option>
          <option>20 条/页</option>
          <option>50 条/页</option>
          <option>100 条/页</option>
        </select>
      </div>
      <button class="hnui-pagination-prev is-disabled">
        <i class="hnui-icon hnui-icon-chevron-right"></i>
      </button>
      <button class="hnui-pagination-item is-active">1</button>
      <button class="hnui-pagination-item">2</button>
      <button class="hnui-pagination-item">3</button>
      <button class="hnui-pagination-item">4</button>
      <button class="hnui-pagination-item">5</button>
      <span class="hnui-pagination-jumper">...</span>
      <button class="hnui-pagination-item">11</button>
      <button class="hnui-pagination-next">
        <i class="hnui-icon hnui-icon-chevron-right"></i>
      </button>
      <div class="hnui-pagination-jump">
        <span class="hnui-pagination-jump-text">跳至</span>
        <input type="text" class="hnui-pagination-jump-input" value="11" />
        <span class="hnui-pagination-jump-suffix">/20 页</span>
      </div>
    </div>
  </div>
</div>
 项目名称 标签 项目名称 项目名称 项目名称 项目名称 操作
共 101 项数据
...
跳至/20 页
查看代码(加载状态)
html
<div class="hnui-table-wrapper">
  <table class="hnui-table hnui-table-sm hnui-table-striped">
    <thead>
      <tr>
        <th style="width: 40px">
          <div class="hnui-checkbox">
            <input
              class="hnui-checkbox-input"
              type="checkbox"
              name="fieldName"
              id="checkbox1"
              value="1"
            />
          </div>
        </th>
        <th>
          项目名称
          <span class="hnui-table-sort-icon">
            <i class="hnui-icon hnui-icon-chevron-up"></i>
            <i class="hnui-icon hnui-icon-chevron-down"></i>
          </span>
        </th>
        <th>
          标签
          <span class="hnui-table-sort-icon">
            <i class="hnui-icon hnui-icon-chevron-up"></i>
            <i class="hnui-icon hnui-icon-chevron-down"></i>
          </span>
        </th>
        <th>
          项目名称
          <span class="hnui-table-sort-icon">
            <i class="hnui-icon hnui-icon-chevron-up"></i>
            <i class="hnui-icon hnui-icon-chevron-down"></i>
          </span>
        </th>
        <th>
          项目名称
          <span class="hnui-table-sort-icon">
            <i class="hnui-icon hnui-icon-chevron-up"></i>
            <i class="hnui-icon hnui-icon-chevron-down"></i>
          </span>
        </th>
        <th>
          项目名称
          <span class="hnui-table-sort-icon">
            <i class="hnui-icon hnui-icon-chevron-up"></i>
            <i class="hnui-icon hnui-icon-chevron-down"></i>
          </span>
        </th>
        <th>
          项目名称
          <span class="hnui-table-sort-icon">
            <i class="hnui-icon hnui-icon-chevron-up"></i>
            <i class="hnui-icon hnui-icon-chevron-down"></i>
          </span>
        </th>
        <th class="hnui-table-fixed-right">操作</th>
      </tr>
    </thead>
  </table>

  <div class="hnui-table-footer">
    <div class="hnui-table-footer-loading hnui-table-footer-loading-center">
      <div class="hnui-table-loading-spinner">
        <div class="hnui-table-loading-icon"></div>
        <span>正在加载中...</span>
      </div>
    </div>
    <div class="hnui-pagination hnui-pagination-small">
      <span class="hnui-pagination-total">共 101 项数据</span>
      <div class="hnui-pagination-sizes">
        <select class="hnui-pagination-sizes-select">
          <option>10 条/页</option>
          <option>20 条/页</option>
          <option>50 条/页</option>
          <option>100 条/页</option>
        </select>
      </div>
      <button class="hnui-pagination-prev is-disabled">
        <i class="hnui-icon hnui-icon-chevron-right"></i>
      </button>
      <button class="hnui-pagination-item is-active">1</button>
      <button class="hnui-pagination-item">2</button>
      <button class="hnui-pagination-item">3</button>
      <button class="hnui-pagination-item">4</button>
      <button class="hnui-pagination-item">5</button>
      <span class="hnui-pagination-jumper">...</span>
      <button class="hnui-pagination-item">11</button>
      <button class="hnui-pagination-next">
        <i class="hnui-icon hnui-icon-chevron-right"></i>
      </button>
      <div class="hnui-pagination-jump">
        <span class="hnui-pagination-jump-text">跳至</span>
        <input type="text" class="hnui-pagination-jump-input" value="11" />
        <span class="hnui-pagination-jump-suffix">/20 页</span>
      </div>
    </div>
  </div>
</div>

色块自定义表格 ​

 项目名称 标签 项目名称 项目名称 项目名称 项目名称 操作
项目名称
默认标签
项目名称项目名称项目名称项目名称
管理删除
项目名称项目名称项目名称
默认标签
项目名称项目名称项目名称项目名称
管理删除
项目名称
默认标签
项目名称项目名称项目名称项目名称
管理删除
项目名称
默认标签
项目名称项目名称项目名称项目名称
管理删除
项目名称
默认标签
项目名称项目名称项目名称项目名称
管理删除
项目名称
默认标签
项目名称项目名称项目名称项目名称
管理删除
项目名称
默认标签
项目名称项目名称项目名称项目名称
管理删除
项目名称
默认标签
项目名称项目名称项目名称项目名称
管理删除
项目名称
默认标签
项目名称项目名称项目名称项目名称
管理删除
项目名称
默认标签
项目名称项目名称项目名称项目名称
管理删除
共 101 项数据
...
跳至/20 页
查看代码
html

<div class="hnui-table-wrapper">
  <table class="hnui-table hnui-table-sm">
    <thead>
      <tr>
        <th style="width: 40px">
          <div class="hnui-checkbox">
            <input
              class="hnui-checkbox-input"
              type="checkbox"
              name="fieldName"
              id="checkbox1"
              value="1"
            />
          </div>
        </th>
        <th>
          项目名称
          <span class="hnui-table-sort-icon">
            <i class="hnui-icon hnui-icon-chevron-up"></i>
            <i class="hnui-icon hnui-icon-chevron-down"></i>
          </span>
        </th>
        <th>
          标签
          <span class="hnui-table-sort-icon">
            <i class="hnui-icon hnui-icon-chevron-up"></i>
            <i class="hnui-icon hnui-icon-chevron-down"></i>
          </span>
        </th>
        <th>
          项目名称
          <span class="hnui-table-sort-icon">
            <i class="hnui-icon hnui-icon-chevron-up"></i>
            <i class="hnui-icon hnui-icon-chevron-down"></i>
          </span>
        </th>
        <th>
          项目名称
          <span class="hnui-table-sort-icon">
            <i class="hnui-icon hnui-icon-chevron-up"></i>
            <i class="hnui-icon hnui-icon-chevron-down"></i>
          </span>
        </th>
        <th>
          项目名称
          <span class="hnui-table-sort-icon">
            <i class="hnui-icon hnui-icon-chevron-up"></i>
            <i class="hnui-icon hnui-icon-chevron-down"></i>
          </span>
        </th>
        <th>
          项目名称
          <span class="hnui-table-sort-icon">
            <i class="hnui-icon hnui-icon-chevron-up"></i>
            <i class="hnui-icon hnui-icon-chevron-down"></i>
          </span>
        </th>
        <th class="hnui-table-fixed-right">操作</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>
          <div class="hnui-checkbox">
            <input
              class="hnui-checkbox-input"
              type="checkbox"
              name="fieldName"
              id="checkbox1"
              value="1"
            />
          </div>
        </td>
        <td>项目名称</td>
        <td>
          <div class="hnui-tag hnui-tag-light-outline hnui-tag-success">默认标签</div>
        </td>
        <td>项目名称</td>
        <td>项目名称</td>
        <td>项目名称</td>
        <td>项目名称</td>
        <td class="hnui-table-fixed-right">
          <div class="hnui-table-actions">
            <a href="javascript:;" class="hnui-link hnui-link-primary">管理</a>
            <a href="javascript:;" class="hnui-link hnui-link-primary">删除</a>
          </div>
        </td>
      </tr>
      <tr>
        <td>
          <div class="hnui-checkbox">
            <input
              class="hnui-checkbox-input"
              type="checkbox"
              name="fieldName"
              value="1"
            />
          </div>
        </td>
        <td>项目名称项目名称项目名称</td>
        <td>
          <div class="hnui-tag hnui-tag-light-outline hnui-tag-success">默认标签</div>
        </td>
        <td class="hnui-table-cell-color-yellow-light">项目名称</td>
        <td class="hnui-table-cell-color-green-deep">项目名称</td>
        <td class="hnui-table-cell-color-red-medium">项目名称</td>
        <td>项目名称</td>
        <td class="hnui-table-fixed-right">
          <div class="hnui-table-actions">
            <a href="javascript:;" class="hnui-link hnui-link-primary">管理</a>
            <a href="javascript:;" class="hnui-link hnui-link-primary">删除</a>
          </div>
        </td>
      </tr>
      <tr>
        <td>
          <div class="hnui-checkbox">
            <input
              class="hnui-checkbox-input"
              type="checkbox"
              name="fieldName"
              value="1"
            />
          </div>
        </td>
        <td>项目名称</td>
        <td>
          <div class="hnui-tag hnui-tag-light-outline hnui-tag-success">默认标签</div>
        </td>
        <td class="hnui-table-cell-color-yellow-light">项目名称</td>
        <td class="hnui-table-cell-color-green-deep">项目名称</td>
        <td class="hnui-table-cell-color-red-medium">项目名称</td>
        <td>项目名称</td>
        <td class="hnui-table-fixed-right">
          <div class="hnui-table-actions">
            <a href="javascript:;" class="hnui-link hnui-link-primary">管理</a>
            <a href="javascript:;" class="hnui-link hnui-link-primary">删除</a>
          </div>
        </td>
      </tr>
      <tr>
        <td>
          <div class="hnui-checkbox">
            <input
              class="hnui-checkbox-input"
              type="checkbox"
              name="fieldName"
              value="1"
            />
          </div>
        </td>
        <td>项目名称</td>
        <td>
          <div class="hnui-tag hnui-tag-light-outline hnui-tag-success">默认标签</div>
        </td>
        <td class="hnui-table-cell-color-yellow-light">项目名称</td>
        <td class="hnui-table-cell-color-green-deep">项目名称</td>
        <td class="hnui-table-cell-color-red-medium">项目名称</td>
        <td>项目名称</td>
        <td class="hnui-table-fixed-right">
          <div class="hnui-table-actions">
            <a href="javascript:;" class="hnui-link hnui-link-primary">管理</a>
            <a href="javascript:;" class="hnui-link hnui-link-primary">删除</a>
          </div>
        </td>
      </tr>
      <tr>
        <td>
          <div class="hnui-checkbox">
            <input
              class="hnui-checkbox-input"
              type="checkbox"
              name="fieldName"
              value="1"
            />
          </div>
        </td>
        <td>项目名称</td>
        <td>
          <div class="hnui-tag hnui-tag-light-outline hnui-tag-success">默认标签</div>
        </td>
        <td class="hnui-table-cell-color-yellow-light">项目名称</td>
        <td class="hnui-table-cell-color-green-deep">项目名称</td>
        <td>项目名称</td>
        <td>项目名称</td>
        <td class="hnui-table-fixed-right">
          <div class="hnui-table-actions">
            <a href="javascript:;" class="hnui-link hnui-link-primary">管理</a>
            <a href="javascript:;" class="hnui-link hnui-link-primary">删除</a>
          </div>
        </td>
      </tr>
      <tr>
        <td>
          <div class="hnui-checkbox">
            <input
              class="hnui-checkbox-input"
              type="checkbox"
              name="fieldName"
              value="1"
            />
          </div>
        </td>
        <td>项目名称</td>
        <td>
          <div class="hnui-tag hnui-tag-light-outline hnui-tag-success">默认标签</div>
        </td>
        <td>项目名称</td>
        <td>项目名称</td>
        <td>项目名称</td>
        <td>项目名称</td>
        <td class="hnui-table-fixed-right">
          <div class="hnui-table-actions">
            <a href="javascript:;" class="hnui-link hnui-link-primary">管理</a>

            <a href="javascript:;" class="hnui-link hnui-link-primary">删除</a>
          </div>
        </td>
      </tr>
      <tr>
        <td>
          <div class="hnui-checkbox">
            <input
              class="hnui-checkbox-input"
              type="checkbox"
              name="fieldName"
              value="1"
            />
          </div>
        </td>
        <td>项目名称</td>
        <td>
          <div class="hnui-tag hnui-tag-light-outline hnui-tag-success">默认标签</div>
        </td>
        <td>项目名称</td>
        <td>项目名称</td>
        <td>项目名称</td>
        <td>项目名称</td>
        <td class="hnui-table-fixed-right">
          <div class="hnui-table-actions">
            <a href="javascript:;" class="hnui-link hnui-link-primary">管理</a>
            <a href="javascript:;" class="hnui-link hnui-link-primary">删除</a>
          </div>
        </td>
      </tr>
      <tr>
        <td>
          <div class="hnui-checkbox">
            <input
              class="hnui-checkbox-input"
              type="checkbox"
              name="fieldName"
              value="1"
            />
          </div>
        </td>
        <td>项目名称</td>
        <td>
          <div class="hnui-tag hnui-tag-light-outline hnui-tag-success">默认标签</div>
        </td>
        <td>项目名称</td>
        <td>项目名称</td>
        <td>项目名称</td>
        <td>项目名称</td>
        <td class="hnui-table-fixed-right">
          <div class="hnui-table-actions">
            <a href="javascript:;" class="hnui-link hnui-link-primary">管理</a>
            <a href="javascript:;" class="hnui-link hnui-link-primary">删除</a>
          </div>
        </td>
      </tr>
      <tr>
        <td>
          <div class="hnui-checkbox">
            <input
              class="hnui-checkbox-input"
              type="checkbox"
              name="fieldName"
              value="1"
            />
          </div>
        </td>
        <td>项目名称</td>
        <td>
          <div class="hnui-tag hnui-tag-light-outline hnui-tag-success">默认标签</div>
        </td>
        <td>项目名称</td>
        <td>项目名称</td>
        <td>项目名称</td>
        <td>项目名称</td>
        <td class="hnui-table-fixed-right">
          <div class="hnui-table-actions">
            <a href="javascript:;" class="hnui-link hnui-link-primary">管理</a>
            <a href="javascript:;" class="hnui-link hnui-link-primary">删除</a>
          </div>
        </td>
      </tr>
      <tr>
        <td>
          <div class="hnui-checkbox">
            <input
              class="hnui-checkbox-input"
              type="checkbox"
              name="fieldName"
              value="1"
            />
          </div>
        </td>
        <td>项目名称</td>
        <td>
          <div class="hnui-tag hnui-tag-light-outline hnui-tag-success">默认标签</div>
        </td>
        <td>项目名称</td>
        <td>项目名称</td>
        <td>项目名称</td>
        <td>项目名称</td>
        <td class="hnui-table-fixed-right">
          <div class="hnui-table-actions">
            <a href="javascript:;" class="hnui-link hnui-link-primary">管理</a>
            <a href="javascript:;" class="hnui-link hnui-link-primary">删除</a>
          </div>
        </td>
      </tr>
    </tbody>
  </table>
  <div class="hnui-table-footer">
    <div class="hnui-pagination hnui-pagination-small">
      <span class="hnui-pagination-total">共 101 项数据</span>
      <div class="hnui-pagination-sizes">
        <select class="hnui-pagination-sizes-select">
          <option>10 条/页</option>
          <option>20 条/页</option>
          <option>50 条/页</option>
          <option>100 条/页</option>
        </select>
      </div>
      <button class="hnui-pagination-prev is-disabled">
        <i class="hnui-icon hnui-icon-chevron-right"></i>
      </button>
      <button class="hnui-pagination-item is-active">1</button>
      <button class="hnui-pagination-item">2</button>
      <button class="hnui-pagination-item">3</button>
      <button class="hnui-pagination-item">4</button>
      <button class="hnui-pagination-item">5</button>
      <span class="hnui-pagination-jumper">...</span>
      <button class="hnui-pagination-item">11</button>
      <button class="hnui-pagination-next">
        <i class="hnui-icon hnui-icon-chevron-right"></i>
      </button>
      <div class="hnui-pagination-jump">
        <span class="hnui-pagination-jump-text">跳至</span>
        <input type="text" class="hnui-pagination-jump-input" value="11" />
        <span class="hnui-pagination-jump-suffix">/20 页</span>
      </div>
    </div>
  </div>
</div>

表单颜色/选择范围 ​

颜色色值表

高亮色 ​

高亮色

统一UI

Copyright © 2024