Vue组件中使用子组件渲染表格行时表头与数据错位问题

嘿，这个问题我太熟了——你的表格布局错乱完全是因为DOM结构不符合HTML表格规范导致的！

问题根源 #

HTML表格有严格的层级要求：<tr>的直接子元素必须是<td>或<th>，不能嵌套其他块级元素（比如你的子组件里的<div>）。看你的代码：

• 主组件里<tbody>的<tr>内部直接放了<UserBook>组件
• 而UserBook的根元素是<div>，这就导致渲染后的DOM变成了：

  <tr>
    <div>
      <td>...</td>
      <td>...</td>
      <!-- 其他td -->
    </div>
  </tr>
  

这种非法嵌套会彻底打乱浏览器的表格布局算法，表头和数据列的宽度计算完全错位，自然就出现对齐甚至重叠的问题。

另外还有个小细节：你的表头有5个<th>（第一个是空的），但子组件里只返回了4个<td>，列数不匹配也会加重布局错乱！

修复方案 #

1. 修改UserBook子组件，移除多余的根

在Vue 2中，我们可以用<template>作为根容器（它不会被渲染成真实DOM），同时补充表头对应的空<td>：

<template>
  <template> <!-- 用template包裹，不生成额外DOM节点 -->
    <td></td> <!-- 对应表头的空列，保证列数一致 -->
    <td>
      <router-link :to="`/books/${book.id}`" class="lightbox">
        {{ book.title }}
      </router-link>
    </td>
    <td>{{ book.authors[0] }}</td>
    <td>{{ moment(book.created_at).strftime("%A, %d %b %Y %l:%M %p") }}</td>
    <td>
      <div flat color="grey" @click="deleteBook(book.id)">
        <i class="fa fa-trash "></i>
      </div>
    </td>
  </template>
</template>

如果是Vue 3，你可以直接去掉根容器，使用多根元素（Vue 3原生支持）：

<template>
  <td></td>
  <td>
    <router-link :to="`/books/${book.id}`" class="lightbox">
      {{ book.title }}
    </router-link>
  </td>
  <td>{{ book.authors[0] }}</td>
  <td>{{ moment(book.created_at).strftime("%A, %d %b %Y %l:%M %p") }}</td>
  <td>
    <div flat color="grey" @click="deleteBook(book.id)">
      <i class="fa fa-trash "></i>
    </div>
  </td>
</template>

2. 主组件无需额外修改

修改后，主组件里的<tr>会直接渲染出5个<td>，DOM结构完全符合表格规范：

<tr>
  <td></td>
  <td>...</td>
  <td>...</td>
  <td>...</td>
  <td>...</td>
</tr>

验证效果 #

浏览器现在能正确识别表格结构，自动计算每列的宽度，表头和数据行就能完美对齐了。

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