英文:
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:
<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>
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 <tr> tag and I need it to go the width of the page, as it happens with the w-full class in <table>.
I tried adding flex justify-start classes for <tr> but it makes the columns wavy because they no longer depend on the size of the text in the <th> and <td> 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
在我们的<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>
英文:
One possible solution is to create another <th> element at the end of our <tr> element. We will then set the <th> element to be empty with a full width:
<th class="w-full"></th>
This way:
<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>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论