前端el-table表头显示不全

Question

el-table
表头里不知道为什么，在表格项较少的情况下，右边多一个遮挡，导致表头显示不全，但是检查元素检查不到这一块，也没有边距

Answer 1

参考免费微信小程序：皆我百晓生 作答，经由专家-皆知整理回复，如问题解决，望采纳；如仍有疑问，请评论回复。

这个问题可以通过调整CSS规则来解决。在<table>标签中添加display: table-caption;属性可以帮助解决这个问题。

首先，我们需要找到导致问题的元素。在这个例子中，我们可以在<thead>标签内找到这个元素。然后，我们可以为它添加display: table-caption;属性。

以下是修改后的HTML代码：

<table>
  <thead>
    <tr>
      <th colspan="2" rowspan="2" class="el-table__cell is-left">
        表头标题
      </th>
      <th colspan="2" rowspan="2" class="el-table__cell is-right">
        表头标题
      </th>
      <th colspan="2" rowspan="2" class="el-table__cell is-middle">
        表头标题
      </th>
    </tr>
    <tr>
      <td colspan="2" class="el-table__cell is-right">
        表头标题
      </td>
      <td colspan="2" class="el-table__cell is-middle">
        表头标题
      </td>
    </tr>
    <tr>
      <td colspan="2" class="el-table__cell is-right">
        表头标题
      </td>
      <td colspan="2" class="el-table__cell is-middle">
        表头标题
      </td>
    </tr>
    <tr>
      <td colspan="2" class="el-table__cell is-right">
        表头标题
      </td>
      <td colspan="2" class="el-table__cell is-middle">
        表头标题
      </td>
    </tr>
    <tr>
      <td colspan="2" class="el-table__cell is-right">
        表头标题
      </td>
      <td colspan="2" class="el-table__cell is-middle">
        表头标题
      </td>
    </tr>
    <tr>
      <td colspan="2" class="el-table__cell is-right">
        表头标题
      </td>
      <td colspan="2" class="el-table__cell is-middle">
        表头标题
      </td>
    </tr>
  </thead>
</table>

这段代码将使所有的表头标题位于同一行，并且不会因为表单项目较少而超出屏幕。如果你想要更精细地控制表头的位置和大小，可以尝试调整colspan和rowspan值以及class属性。例如，如果你想让每个表头标题都在其列上对齐，可以这样修改：<th class="el-table__cell is-right is-leaf">...。