css 如何将表中具有“w-full”类的列与表中具有“w-auto”类的列对齐？

kq0g1dla 于 2023-07-01 发布在其他

关注(0)|答案(1)|浏览(203)

我有这样一张table：

<table class="w-full text-left">
      <thead>
        <tr class="border-b text-blue-900">
          <th class="p-3">Name</th>
          <th class="p-3">Email</th>
          <th class="p-3">Phone</th>
        </tr>
      </thead>
      <tbody>
        <tr class="border-b font-medium text-sm">
          <td class="p-3">Gustavo</td>
          <td class="p-3">gustavo.fring@gmail.com</td>
          <td class="p-3">+10000000</td>
        </tr>
      </tbody>
    </table>

对于w-full类，表中的列尽可能地间隔开，而我需要使它们尽可能地接近，就像w-auto类一样。但是我不能将w-full更改为w-auto，因为我使用border-b类作为<tr>标记，并且我需要它来扩展页面的宽度，就像<table>中的w-full类一样。
我尝试为<tr>添加flex justify-start类，但它使列呈波浪形，因为它们不再像在auto表中那样依赖于<th>和<td>标记中的文本大小。表必须作为堆栈工作，当添加新列时，它不会更改其宽度（如w-auto所做的那样），并且旧列不会移动（如w-full所做的那样）。
我找到了一个表格模板，我想如何使我的，但该方法不适用于我：desired result

css

来源：https://stackoverflow.com/questions/76582259/how-to-align-columns-in-a-table-what-have-w-full-class-as-like-columns-in-tabl

1条答案

按热度按时间

4sup72z81#

一个可能的解决方案是在<tr>元素的末尾创建另一个<th>元素。然后，我们将<th>元素设置为空，并具有完整的宽度：

<th class="w-full"></th>

这样：

<table class="w-full text-left ">
  <thead>
    <tr class="border-b text-blue-900 ">
      <th class="p-3">Name</th>
      <th class="p-3">Email</th>
      <th class="p-3">Phone</th>
      <th class="w-full"></th>
    </tr>
  </thead>
  <tbody>
    <tr class="border-b text-sm font-medium">
      <td class="p-3">Gustavo</td>
      <td class="p-3">gustavo.fring@gmail.com</td>
      <td class="p-3">+10000000</td>
    </tr>
  </tbody>
</table>

Tailwind-play

赞(0）回复(0）举报 2023-07-01

我来回答

css 如何将表中具有“w-full”类的列与表中具有“w-auto”类的列对齐？

1条答案

相关问题

热门标签

最新问答