bootstrapTable 没有数据提示居中展示

你可以通过以下方式将无数据提示居中展示:

1. 在表格容器中添加一个 CSS 类 "text-center"，它将使提示文本居中对齐。

<div class="table-responsive">
  <table id="myTable" class="table table-striped table-bordered">
    <thead>
      <tr>
        <th data-field="id">ID</th>
        <th data-field="name">Name</th>
        <th data-field="price">Price</th>
      </tr>
    </thead>
  </table>
</div>

2. 在 JavaScript 中设置无数据提示信息的属性 `formatNoMatches`，并将其中的提示信息包裹在一个 `<div>` 元素中。

$('#myTable').bootstrapTable({
  formatNoMatches: function () {
    return '<div class="text-center">没有匹配的记录</div>';
  }
});

这样，无数据提示信息就会居中展示了。

相关问题

BOOTstrap table动态合并居中单元格

要实现动态合并居中单元格，可以使用 Bootstrap Table 的自定义列插件。具体步骤如下：

1. 定义自定义列插件，实现合并单元格和居中文本的功能。示例代码如下：

$.fn.bootstrapTable.columnDefaults.mergeCells = true;

$.fn.bootstrapTable.cellStyles.alignCenter = function (field, row, index, value) {
  return {
    classes: 'text-center'
  };
};

$.fn.bootstrapTable.columnDefaults.cellStyle = $.fn.bootstrapTable.cellStyles.alignCenter;

$.extend($.fn.bootstrapTable.defaults, {
  onPostBody: function () {
    $(this).bootstrapTable('mergeCells', {
      field: 'fieldName',
      rowspan: 2,
      index: 0
    });
  }
});

2. 在表格中使用自定义列插件。示例代码如下：

<table id="table" data-toggle="table" data-url="your/data/url" data-columns="your/data/columns">
  <thead>
    <tr>
      <th data-field="fieldName" data-align="center" data-halign="center">Field Name</th>
      <th data-field="field1" data-align="center" data-halign="center">Field 1</th>
      <th data-field="field2" data-align="center" data-halign="center">Field 2</th>
    </tr>
  </thead>
</table>

其中，`data-field` 属性指定列的字段名，`data-align` 和 `data-halign` 属性指定水平对齐方式，`data-toggle="table"` 和 `data-url` 属性指定使用 Bootstrap Table 插件和数据源的 URL，`data-columns` 属性指定列的定义。在列定义中，可以使用自定义的插件，如 `mergeCells`。

需要注意的是，这里的 `fieldName` 需要替换为实际的字段名。另外，`rowspan` 属性可以指定合并单元格的行数，`index` 属性可以指定开始合并的行号。

希望这个回答能够帮到你。

el-table+数据垂直居中

要使el-table中的数据垂直居中，可以使用CSS样式来实现。具体步骤如下：

1.在el-table中添加一个slot，用于自定义单元格的内容。

2.在slot中添加一个div，用于包裹单元格中的内容。

3.为这个div添加CSS样式，使其垂直居中。

下面是一个示例代码：

<el-table :data="tableData">
  <el-table-column prop="name" label="姓名">
    <template slot-scope="scope">
      <div class="cell-wrapper">{{ scope.row.name }}</div>
    </template>
  </el-table-column>
  <el-table-column prop="age" label="年龄">
    <template slot-scope="scope">
      <div class="cell-wrapper">{{ scope.row.age }}</div>
    </template>
  </el-table-column>
</el-table>

<style>
.cell-wrapper {
  display: flex;
  align-items: center;
  height: 100%;
}
</style>

在上面的代码中，我们为el-table中的每个单元格添加了一个slot，并在slot中添加了一个div，用于包裹单元格中的内容。然后，我们为这个div添加了CSS样式，使其垂直居中。