layui table表头宽度小自动换行

在 layui table 中，当表头内容过长，会导致表格变形，可以通过以下代码实现自动换行：

.layui-table thead th .layui-table-cell {
  white-space: normal;
  word-wrap: break-word;
}

其中，`white-space: normal;` 表示允许换行，`word-wrap: break-word;` 表示单词内换行。这样设置后，表头内容过长时就会自动换行，不会影响表格的显示效果。

相关问题

layui table表头变窄自动换行

如果您想要当表头内容过长时，自动变宽、换行显示，可以通过设置`minWidth`属性来实现。

例如：

<table class="layui-table">
  <colgroup>
    <col width="150">
    <col width="200">
    <col>
  </colgroup>
  <thead>
    <tr>
      <th lay-data="{field:'id', width:80, sort:true}">ID</th>
      <th lay-data="{field:'username', width:120}">用户名</th>
      <th lay-data="{field:'email', minWidth:200}">邮箱地址（自动换行）</th>
      <th lay-data="{field:'sex', width:80, sort:true}">性别</th>
      <th lay-data="{field:'city', minWidth:100}">城市</th>
      <th lay-data="{field:'sign', minWidth:100}">签名</th>
      <th lay-data="{field:'experience', sort:true}">积分</th>
      <th lay-data="{field:'score', sort:true}">评分</th>
      <th lay-data="{field:'classify', minWidth:100}">职业</th>
      <th lay-data="{field:'wealth', sort:true}">财富</th>
    </tr> 
  </thead>
  <tbody>
    <tr>
      <td>10001</td>
      <td>user-1</td>
      <td>user-1@qq.com</td>
      <td>男</td>
      <td>北京</td>
      <td>程序员</td>
      <td>1000</td>
      <td>90</td>
      <td>IT</td>
      <td>999999</td>
    </tr>
    <!-- more data -->
  </tbody>
</table>

在上面的例子中，第三列表头内容设置了`minWidth:200`，表示当表头内容不够宽时，自动变宽，同时会自动换行显示。您可以根据实际情况调整`minWidth`属性的值。

layui table表头自动换行

如果您想要让表头内容自动换行，可以通过CSS来实现。

例如：

<style>
.layui-table thead th {
  white-space: normal !important;
}
</style>

<table class="layui-table">
  <colgroup>
    <col width="150">
    <col width="200">
    <col>
  </colgroup>
  <thead>
    <tr>
      <th>ID</th>
      <th>用户名</th>
      <th>邮箱地址（自动换行）</th>
      <th>性别</th>
      <th>城市</th>
      <th>签名</th>
      <th>积分</th>
      <th>评分</th>
      <th>职业</th>
      <th>财富</th>
    </tr> 
  </thead>
  <tbody>
    <tr>
      <td>10001</td>
      <td>user-1</td>
      <td>user-1@qq.com</td>
      <td>男</td>
      <td>北京</td>
      <td>程序员</td>
      <td>1000</td>
      <td>90</td>
      <td>IT</td>
      <td>999999</td>
    </tr>
    <!-- more data -->
  </tbody>
</table>

在上面的例子中，我们通过CSS设置了表头单元格的`white-space`属性为`normal`，表示表头单元格内容可以自动换行。这样就可以让表头内容自动换行了。