Table 表格

CSS样式

全部 table 样式代码：

查看代码

:root {
  --bs-table-border: #0F3C7E;
  --bs-table-header-bg: rgba(0, 116, 255, 0.18);
  --bs-table-row-hover: rgba(0, 116, 255, 0.08);
  --bs-table-text: #A3C0E5;
  --bs-table-link: #247BFF;
  --bs-table-status-online: #00FF4D;
  --bs-table-status-warning: #FFC300;
  --bs-table-status-offline: #A3C0E5;
  --bs-table-row-h: 54px;
  --bs-table-header-h: 48px;
  --bs-table-pad-x: 20px;
}

.bs-table {
  width: 100%;
  border: 1px solid var(--bs-table-border);
  border-collapse: separate;
  border-spacing: 0;
}

.bs-table thead th {
  height: var(--bs-table-header-h);
  padding: 0 var(--bs-table-pad-x);
  text-align: left;
  font-size: 14px;
  font-weight: 700;
  color: var(--bs-table-text);
  background: var(--bs-table-header-bg);
  border-bottom: 1px solid var(--bs-table-border);
}

.bs-table tbody td {
  height: var(--bs-table-row-h);
  padding: 0 var(--bs-table-pad-x);
  font-size: 14px;
  font-weight: 500;
  color: var(--bs-table-text);
  border-bottom: 1px solid rgba(15, 60, 126, 0.6);
}

.bs-table tbody tr:hover td {
  background: var(--bs-table-row-hover);
}

.bs-table__ops a {
  color: var(--bs-table-link);
  text-decoration: none;
  margin-right: 18px;
}

.bs-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.bs-status__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--bs-table-status-offline);
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.15);
}

.bs-status--online .bs-status__dot { background: var(--bs-table-status-online); }
.bs-status--warning .bs-status__dot { background: var(--bs-table-status-warning); }

.bs-checkbox {
  width: 14px;
  height: 14px;
  border: 1px solid rgba(163, 192, 229, 0.5);
  border-radius: 2px;
  display: inline-block;
}

示例

拆解明细

1. 表格结构

• 表头：Checkbox / 应用名称 / 状态 / 创建时间 / 操作
• 行高：54px；表头高：48px
• 外框：1px solid #0F3C7E；行分割线：rgba(15,60,126,0.6)

查看代码

.bs-table {
  width: 100%;
  border: 1px solid var(--bs-table-border);
  border-collapse: separate;
  border-spacing: 0;
}

.bs-table thead th {
  height: var(--bs-table-header-h);
  padding: 0 var(--bs-table-pad-x);
  background: var(--bs-table-header-bg);
  border-bottom: 1px solid var(--bs-table-border);
}

.bs-table tbody td {
  height: var(--bs-table-row-h);
  padding: 0 var(--bs-table-pad-x);
  border-bottom: 1px solid rgba(15, 60, 126, 0.6);
}

2. 文字与颜色

• 表头/正文：14px；正文颜色：#A3C0E5
• 操作链接：#247BFF
• 状态点：上线 #00FF4D / 异常 #FFC300 / 未上线 #A3C0E5

查看代码

.bs-table thead th {
  font-size: 14px;
  font-weight: 700;
  color: var(--bs-table-text);
}

.bs-table tbody td {
  font-size: 14px;
  font-weight: 500;
  color: var(--bs-table-text);
}

.bs-table__ops a {
  color: var(--bs-table-link);
  text-decoration: none;
  margin-right: 18px;
}

3. 交互规范

• Hover：整行弱高亮 rgba(0,116,255,0.08)
• Checkbox：14×14，2px 圆角

查看代码

.bs-table tbody tr:hover td {
  background: var(--bs-table-row-hover);
}

.bs-checkbox {
  width: 14px;
  height: 14px;
  border: 1px solid rgba(163, 192, 229, 0.5);
  border-radius: 2px;
  display: inline-block;
}

4. 示例代码

查看代码

<table class="bs-table">
  <thead>
    <tr>
      <th style="width:56px"><span class="bs-checkbox"></span></th>
      <th>应用名称</th>
      <th>状态</th>
      <th>创建时间</th>
      <th>操作</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><span class="bs-checkbox"></span></td>
      <td>应用名称 1</td>
      <td>
        <span class="bs-status bs-status--online">
          <span class="bs-status__dot"></span>已上线
        </span>
      </td>
      <td>2020-01-04 09:41:00</td>
      <td class="bs-table__ops">
        <a href="javascript:;">编辑</a>
        <a href="javascript:;">复制</a>
        <a href="javascript:;">删除</a>
      </td>
    </tr>
  </tbody>
</table>