为什么表格列宽在这里发生变化？

Answer 1

桌子上有

class="grow"

，这会导致该列在悬停时改变大小。

grow

类应用

flex-grow: 1

，这使得表格填充其弹性容器内的可用水平空间。

您应用的样式可能会更改单元格内内容的大小，从而由于将

flex-grow: 1

应用于表格而影响列的整体大小。

作为补救措施，您可以让表格默认填充可用空间：

<link href="https://unpkg.com/[email protected]/dist/tailwind.min.css" rel="stylesheet" />
<div class="flex justify-center">
  <!-- Added justify-center to center the table -->
  <table class="w-full">
    <!-- Removed the grow class and added w-full to make the table fill the available space -->
    <thead>
      <tr>
        <th>col1</th>
        <th>col2</th>
        <th>col3</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>
          <div class="flex flex-row">
            <div class="ml-1 px-2 py-1 hover:font-semibold hover:border-blue-500 hover:bg-blue-500 hover:text-white">
              Some Text
            </div>
            row1-1
          </div>
        </td>
        <td>row1-2</td>
        <td>row1-3</td>
      </tr>
    </tbody>
  </table>
</div>