一、表格内容对齐基础配置

1.1 单元格内容对齐方式

Bootstrap Table提供三种原生对齐方式：左对齐（默认）、居中对齐和右对齐。通过data-align属性可快速配置列级对齐方式：

<table data-toggle="table">
  <thead>
    <tr>
      <th data-field="id" data-align="center">ID</th>
      <th data-field="name" data-align="left">姓名</th>
      <th data-field="price" data-align="right">价格</th>
    </tr>
  </thead>
</table>

1.2 全局对齐配置

对于需要统一对齐的场景，可通过JavaScript初始化参数实现全局设置：

$('#table').bootstrapTable({
  align: 'center', // 默认列对齐方式
  headersAlign: 'center' // 表头对齐方式
});

1.3 混合对齐策略

实际项目中常需混合使用多种对齐方式，建议采用列级配置优先原则：

columns: [{
  field: 'product',
  title: '商品',
  align: 'left'
}, {
  field: 'quantity',
  title: '数量',
  align: 'center'
}, {
  field: 'total',
  title: '总价',
  align: 'right',
  formatter: priceFormatter // 自定义格式化函数
}]

二、响应式布局适配方案

2.1 移动端堆叠视图优化

在移动设备上，Bootstrap Table默认将表格转换为堆叠布局。通过CSS可精细控制对齐效果：

/* 移动端堆叠视图对齐 */
@media (max-width: 768px) {
  .bootstrap-table .fixed-table-container .table td {
    text-align: center !important;
    display: flex;
    justify-content: space-between;
  }
}

2.2 动态列隐藏策略

结合data-responsive属性实现智能列管理：

<table data-responsive="true" data-responsive-breakpoint="992">
  <!-- 列定义 -->
</table>

当屏幕宽度小于992px时，通过CSS控制隐藏列的文本对齐：

.hidden-xs .th-inner {
  text-align: center !important;
}

2.3 弹性单位布局

推荐使用相对单位实现动态对齐：

.table-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}
.bootstrap-table .table td {
  padding: 0.75rem calc(1vw + 5px);
}

三、数据驱动样式控制

3.1 条件格式化对齐

通过formatter函数实现动态对齐：

function statusFormatter(value, row, index) {
  const align = value === '紧急' ? 'center' : 'left';
  return `<div style="text-align:${align}">${value}</div>`;
}
// 列配置
{
  field: 'status',
  title: '状态',
  formatter: statusFormatter
}

3.2 数值类型特殊处理

金融类数据建议统一右对齐并添加千位分隔符：

function currencyFormatter(value) {
  if (!value) return '-';
  return `<div style="text-align:right">
    ${value.toLocaleString('zh-CN', {
      style: 'decimal',
      minimumFractionDigits: 2
    })}
  </div>`;
}

3.3 多行文本对齐

处理长文本时建议结合word-break和垂直对齐：

.table td.text-wrap {
  white-space: normal;
  word-break: break-word;
  vertical-align: middle;
  text-align: justify;
}

四、高级样式定制技巧

4.1 表头固定对齐

当启用固定表头时，需单独设置对齐样式：

.fixed-table-header .th-inner {
  text-align: center !important;
  background: #f8f9fa;
}

4.2 斑马纹表格优化

结合对齐样式增强可读性：

.table-striped tbody tr:nth-of-type(odd) {
  background-color: rgba(0, 0, 0, 0.02);
}
.table-striped tbody tr td {
  vertical-align: middle;
}

4.3 自定义单元格样式

通过cellStyle回调实现精细控制：

$('#table').bootstrapTable({
  cellStyle: function(value, row, index, field) {
    if (field === 'progress') {
      return {
        classes: 'text-center',
        css: {
          'font-weight': 'bold',
          'color': getProgressColor(value)
        }
      };
    }
  }
});

五、常见问题解决方案

5.1 对齐失效排查

检查CSS优先级冲突
确认是否被其他样式覆盖
验证DOM结构是否正确渲染
检查浏览器开发者工具中的计算样式

5.2 打印样式适配

@media print {
  .bootstrap-table .table th,
  .bootstrap-table .table td {
    text-align: center !important;
    border: 1px solid #ddd !important;
  }
}

5.3 导出数据对齐

使用扩展插件时需单独配置导出样式：

$('#table').bootstrapTable({
  // ...其他配置
  showExport: true,
  exportDataType: 'all',
  exportOptions: {
    fileName: '数据报表',
    worksheetName: 'Sheet1',
    excelstyles: ['text-align:center']
  }
});

六、性能优化建议

对固定列数表格使用CSS类控制而非行内样式
避免在formatter中执行复杂计算
使用detailFormatter处理需要特殊对齐的展开行
对大数据量表格启用虚拟滚动（需配合特定版本）

通过系统化的对齐策略和样式优化，开发者可以构建出既符合业务需求又具有良好用户体验的数据表格。建议在实际项目中结合具体场景选择合适的实现方案，并通过浏览器开发者工具持续调试优化显示效果。

Bootstrap Table 表格内容对齐与样式优化全攻略