调整表格样式：添加垂直边框、适配首列宽及标签同行显示

需求说明 #

1. 为表格添加垂直边框，第一列宽度自动适配内容
2. 让高亮标签左对齐，空间足够时显示在同一行

修改后的完整代码 #

CSS 代码 #

.content .row {
  padding: 0;
}

/* 配置表格垂直边框：保留列分隔线，去掉水平边框 */
table.borderless td,
table.borderless th {
  border-top: none;
  border-bottom: none;
  border-left: 1px solid #dee2e6;
  border-right: 1px solid #dee2e6;
}
/* 移除表格首尾列的多余边框 */
table.borderless th:first-child,
table.borderless td:first-child {
  border-left: none;
}
table.borderless th:last-child,
table.borderless td:last-child {
  border-right: none;
}
/* 取消固定布局，让表格自动适配列宽 */
.table-layout {
  table-layout: auto;
}

.bordered-element {
  display: flex;
  align-items: center;
  border: 2px solid #000;
  border-radius: 10px;
  flex-wrap: wrap;
  padding: 0 1rem; /* 增加内边距避免内容贴边框 */
}

/* 自定义内部容器：左侧标签占满可用空间，右侧高亮标签用Flex排列 */
.bordered-element .label-group {
  flex: 1;
}
.bordered-element .highlight-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem; /* 用gap控制标签间距，替代margin更便捷 */
}

.bordered-element p {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 1rem 0;
}

.bordered-element p.highlighted {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #3da3d3;
  border-radius: 6px;
  padding: 0.5rem 1rem; /* 调整内边距优化标签视觉 */
  min-width: 2.5rem; /* 保证标签最小宽度，避免内容挤压 */
  margin: 0;
}

HTML 代码 #

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<table class="table table-layout borderless">
  <thead>
    <tr>
      <th>Test title</th>
      <th>Test 2</th>
      <th>Test 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <div class="row bordered-element">
          <div class="label-group">
            <p>B11111</p>
          </div>
          <div class="highlight-group">
            <p class="highlighted text text__alternate-text">AB</p>
            <p class="highlighted text text__alternate-text">CD</p>
          </div>
        </div>
      </td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td colspan="2"></td>
    </tr>
  </tbody>
</table>

关键修改点解析 #

需求1实现： #

• 把table-layout: fixed改为table-layout: auto，让表格根据内容自动计算列宽，第一列会自适应内容宽度
• 重新定义borderless表格的边框规则，只保留列之间的垂直边框，同时去掉表格最左、最右侧的边框，避免视觉冗余

需求2实现： #

• 移除原有的col-md-6栅格限制，改用自定义容器label-group和highlight-group，摆脱栅格的固定宽度约束
• 给highlight-group添加Flex布局属性display: flex; flex-wrap: wrap，让高亮标签左对齐，空间充足时自动同行排列，空间不足时自动换行
• 用gap替代margin控制标签间距，布局更整洁；调整高亮标签的内边距和最小宽度，优化视觉效果

内容的提问来源于stack exchange，提问作者Jesus