UI设计规范及说明

Appearance

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");

/* ============================================
   表格容器
   ============================================ */

@import "../input/input.css";
@import "../tag/tag.css";
@import "../button/button.css";
@import "../icon/icon.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 thead .hnui-icon{
  display: inline-block;
}


.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 th {
  padding: 12px 16px;
  height: 40px;
  line-height: 40px;
  text-align: left;
  font-weight: 400;
  color: var(--hnui-text-color);
  border: 1px solid var(--hnui-border-color);
  border-left: none;
  white-space: nowrap;
  background-color: #ebeff5;
  vertical-align: center;
}

.hnui-table .hnui-table-th-label {
  position: relative;
  margin-left: 4px;
  padding-right: 32px;
}
.hnui-table .hnui-table-th-label .hnui-icon {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}

.hnui-table th:first-child {
  border-left: 1px solid var(--hnui-border-color);
}

/* ============================================
   表体
   ============================================ */
.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 var(--hnui-border-color);
  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 var(--hnui-border-color);
}


.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 var(--hnui-border-color);
  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 var(--hnui-border-color);
  background-color: var(--hnui-color-white);
  font-size: 14px;
  color: var(--hnui-text-color);
}

.hnui-table-cell-input {
  padding: 8px 10px;
  height: auto;
}
.hnui-table-cell-icon .hnui-icon {
  margin-right: 8px;
  font-size: 16px;
}

.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: var(--hnui-brand-color8);
}

.hnui-table tbody tr.is-selected td {
  background-color: var(--hnui-brand-color8);
}

.hnui-table tbody tr.is-selected:hover {
  background-color: var(--hnui-brand-color7);
}

.hnui-table tbody tr.is-selected:hover td {
  background-color: var(--hnui-brand-color7);
}

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

/* 浅色系 */
.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: var(--hnui-color-white) !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: var(--hnui-color-white);
}

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

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

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

/* 深色系 */
.hnui-table tbody .hnui-table-cell-color-yellow-deep {
  background-color: var(--hnui-color-white)BF3 !important;
}

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

.hnui-table tbody .hnui-table-cell-color-red-deep {
  background-color: var(--hnui-color-white)6F6 !important;
}

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

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

.hnui-table tbody .hnui-table-cell-highlight-primary {
  background-color: var(--hnui-brand-color);
  color: var(--hnui-color-white);
  border-radius: 4px;
  padding: 2px 8px;
  display: inline-block;
}

.hnui-table tbody .hnui-table-cell-highlight-danger {
  background-color: var(--hnui-danger-color);
  color: var(--hnui-color-white);
  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 var(--hnui-border-color);
}

/* ============================================
   操作列
   ============================================ */
.hnui-table-actions {
  display: flex;
  gap: 16px;
}
.hnui-table-cell-ellipsis {
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.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);
}

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

项目名称标签项目名称项目名称项目名称项目名称操作
项目名称
默认标签
项目名称项目名称项目名称项目名称
管理删除
项目名称项目名称项目名称
默认标签
项目名称项目名称项目名称项目名称
管理删除
项目名称
默认标签
项目名称项目名称项目名称项目名称
管理删除
项目名称
默认标签
项目名称项目名称项目名称项目名称
管理删除
项目名称
默认标签
项目名称项目名称项目名称项目名称
管理删除
项目名称
默认标签
项目名称项目名称项目名称项目名称
管理删除
项目名称
默认标签
项目名称项目名称项目名称项目名称
管理删除
项目名称
默认标签
项目名称项目名称项目名称项目名称
管理删除
项目名称
默认标签
项目名称项目名称项目名称项目名称
管理删除
项目名称
默认标签
项目名称项目名称项目名称项目名称
管理删除
共 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>

单元格内容展示 ​

大尺寸
哇大大
中尺寸
项目名称
小尺寸
项目名称
输入框
icon+文本
项目名称
操作列
管理删除
icon操作列
标签
默认标签
文本+标签
项目名称
默认标签
描述
• 健康
查看代码
html
<!-- 高52PX文本左右间距24px -->
<div class="hnui-table-cell hnui-table-cell-lg">哇大大</div>
html
<!-- 高48PX文本左右间距16PX -->
<div class="hnui-table-cell">项目名称</div>
html
<!-- 高36PX文本左右间距12PX -->
<div class="hnui-table-cell hnui-table-cell-sm">项目名称</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-th-label"><IconSort class="hnui-icon" /></span>
        </th>
        <th>
          标签
          <span class="hnui-table-th-label"><IconSort class="hnui-icon" /></span>
        </th>
        <th>
          项目名称
          <span class="hnui-table-th-label"><IconSort class="hnui-icon" /></span>
        </th>
        <th>
          项目名称
          <span class="hnui-table-th-label"><IconSort class="hnui-icon" /></span>
        </th>
        <th>
          项目名称
          <span class="hnui-table-th-label"><IconSort class="hnui-icon" /></span>
        </th>
        <th>
          项目名称
          <span class="hnui-table-th-label"><IconSort class="hnui-icon" /></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 class="hnui-table-cell-ellipsis">项目名称项目名称项目名称项目名称项目名称项目名称项目名称项目名称项目名称</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-th-label">
            <IconSort class="hnui-icon" />
          </span>
        </th>
        <th>
          标签
          <span class="hnui-table-th-label">
            <IconSort class="hnui-icon" />
          </span>
        </th>
        <th>
          项目名称
          <span class="hnui-table-th-label">
            <IconSort class="hnui-icon" />
          </span>
        </th>
        <th>
          项目名称
          <span class="hnui-table-th-label">
            <IconSort class="hnui-icon" />
          </span>
        </th>
        <th>
          项目名称
          <span class="hnui-table-th-label">
            <IconSort class="hnui-icon" />
          </span>
        </th>
        <th>
          项目名称
          <span class="hnui-table-th-label">
            <IconSort class="hnui-icon" />
          </span>
        </th>
        <th class="hnui-table-fixed-right">操作</th>
      </tr>
    </thead>
  </table>

  <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-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>

色块自定义表格 ​

 项目名称 标签 项目名称 项目名称 项目名称 项目名称 操作
项目名称
默认标签
项目名称项目名称项目名称项目名称
管理删除
项目名称项目名称项目名称
默认标签
项目名称项目名称项目名称项目名称
管理删除
项目名称
默认标签
项目名称项目名称项目名称项目名称
管理删除
项目名称
默认标签
项目名称项目名称项目名称项目名称
管理删除
项目名称
默认标签
项目名称项目名称项目名称项目名称
管理删除
项目名称
默认标签
项目名称项目名称项目名称项目名称
管理删除
项目名称
默认标签
项目名称项目名称项目名称项目名称
管理删除
项目名称
默认标签
项目名称项目名称项目名称项目名称
管理删除
项目名称
默认标签
项目名称项目名称项目名称项目名称
管理删除
项目名称
默认标签
项目名称项目名称项目名称项目名称
管理删除
共 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-th-label"><IconSort class="hnui-icon" /></span>
        </th>
        <th>
          标签
          <span class="hnui-table-th-label"><IconSort class="hnui-icon" /></span>
        </th>
        <th>
          项目名称
          <span class="hnui-table-th-label"><IconSort class="hnui-icon" /></span>
        </th>
        <th>
          项目名称
          <span class="hnui-table-th-label"><IconSort class="hnui-icon" /></span>
        </th>
        <th>
          项目名称
          <span class="hnui-table-th-label"><IconSort class="hnui-icon" /></span>
        </th>
        <th>
          项目名称
          <span class="hnui-table-th-label"><IconSort class="hnui-icon" /></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