如何使具有”w-full”类的表格列与具有”w-auto”类的表格列对齐?

huangapple go评论78阅读模式
英文:

How to align columns in a table what have "w-full" class as like columns in table with the "w-auto" class?

问题

我有这样一个表格:

<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,因为我对<tr>标记使用了border-b类,我需要它与页面宽度一样宽,就像在<table>中使用w-full类时那样。

我尝试为<tr>添加flex justify-start类,但它会使列变得波浪状,因为它们不再依赖于<th><td>标记中文本的大小,就像自动表格中那样。必须让表格像堆栈一样工作,添加新列时不会更改其宽度(就像使用w-auto一样),旧列不会移动(就像使用w-full一样)。

我找到了一个表格模板,展示了我想要制作的表格,但这种方法对我不起作用:期望的结果

英文:

I have such a table:

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

With the w-full class, the columns in the table are spaced as far apart as possible, while I need to make them as close as possible, as is done with the w-auto class. But I can't change w-full to w-auto, because I use the border-b class for the &lt;tr&gt; tag and I need it to go the width of the page, as it happens with the w-full class in &lt;table&gt;.

I tried adding flex justify-start classes for &lt;tr&gt; but it makes the columns wavy because they no longer depend on the size of the text in the &lt;th&gt; and &lt;td&gt; tags like it does in a auto table.
It is necessary that the table works as a stack, when adding new columns, it does not change its width (as is done with w-auto ) and old columns do not move (as is done with w-full).

I found a table template for how I want to make mine, but the method doesn't work for me:desired result

答案1

得分: 1

在我们的&lt;tr&gt;元素的末尾创建另一个&lt;th&gt;元素是一种可能的解决方案。然后,我们将把&lt;th&gt;元素设置为空,并具有全宽度:

&lt;th class=&quot;w-full&quot;&gt;&lt;/th&gt;

这样做:

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

Tailwind-play

英文:

One possible solution is to create another &lt;th&gt; element at the end of our &lt;tr&gt; element. We will then set the &lt;th&gt; element to be empty with a full width:

&lt;th class=&quot;w-full&quot;&gt;&lt;/th&gt;

This way:

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

Tailwind-play

huangapple
  • 本文由 发表于 2023年6月29日 22:58:20
  • 转载请务必保留本文链接:https://go.coder-hub.com/76582259.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定