'How to prevent table from resizing in Tailwind css?
So, i have this table
< table class="table-fixed border-separate border border-green-800">
< thead class="bg-indigo-800 border-b-2 border-indigo-200 w-full">
< tr>
< th
class="px-4 py-2 text-white min-w-10 max-w-10"
v-if="isEditable"
>
Select
</th>
< th
class="px-4 py-2 text-white min-w-20 max-w-20"
@click="setSort('username')"
>
Username
</th>
< th
class="px-4 py-2 text-white min-w-30 max-w-30"
@click="setSort('firstName')"
>
Name
</th>
< th
class="px-4 py-2 text-white min-w-30 max-w-30"
@click="setSort('lastName')"
>
Surname
</th>
< th
class="px-4 py-2 text-white min-w-40 max-w-40"
@click="setSort('email')"
>
Email
</th>
</tr>
</thead>
< tbody class="divide-y divide-grey-100">
< tr
v-for="student in studentsToshow"
:key="student.id"
:class="[
isStudentSelected(student.id)
? 'bg-blue-500 ring ring-blue-300'
: '',
]"
>
< td
class="border border-emerald-500 px-4 py-2 w-10"
v-if="isEditable"
>
< input
type="checkbox"
v-model="selectedStudents"
:id="student.id"
:value="student"
class="form-checkbox rounded text-indigo-600 mr-2 focus:ring-indigo-600"
/>
</td>
< td
class="border border-emerald-500 px-4 py-2 text-black font-medium"
>
{{ student.username }}
</td>
< td`enter code here`
class="border border-emerald-500 px-4 py-2 text-black font-medium"
>
{{ student.firstName }}
</td>
< td
class="border border-emerald-500 px-4 py-2 text-black font-medium"
>
{{ student.lastName }}
</td>
< td
class="border border-emerald-500 px-4 py-2 text-black font-medium"
>
{{ student.email }}
</td>
</tr>
</tbody>
</table>
The problem i have is that when the student's field change their size, all the table just follow the resizing while i want it to stay fixed. The most ugly scenario is when the student array is empty and the table suddenly downsize (because columns are empty). Is there a way to fix the table size? I've tried fixing max and min height in header, but no success
Solution 1:[1]
Give a fixed width to all theads (except the first one) using w-52 and remove all the min-w-20 and max-w-20.
Below is the implementation
<script src="https://cdn.tailwindcss.com"></script>
<section>
<table class="table-fixed border-separate border border-green-800">
<thead class="bg-indigo-800 border-b-2 border-indigo-200 w-full">
<tr>
<th
class="px-4 py-2 text-white w-30"
v-if="isEditable"
>
Select
</th>
<th
class="px-4 py-2 text-white w-52"
@click="setSort('username')"
>
Username
</th>
<th
class="px-4 py-2 text-white w-52"
@click="setSort('firstName')"
>
Name
</th>
<th
class="px-4 py-2 text-white w-52"
@click="setSort('lastName')"
>
Surname
</th>
<th
class="px-4 py-2 text-white w-52"
@click="setSort('email')"
>
Email
</th>
</tr>
</thead>
<tbody class="divide-y divide-grey-100 text-center">
<tr
v-for="student in studentsToshow"
:key="student.id"
:class="[
isStudentSelected(student.id)
? 'bg-blue-500 ring ring-blue-300'
: '',
]"
>
<td
class="border border-emerald-500 px-4 py-2 w-10"
v-if="isEditable"
>
<input
type="checkbox"
v-model="selectedStudents"
:id="student.id"
:value="student"
class="form-checkbox rounded text-indigo-600 mr-2 focus:ring-indigo-600"
/>
</td>
<td
class="border border-emerald-500 px-4 py-2 text-black font-medium"
>
{{ student.userName }}
</td>
<td
class="border border-emerald-500 px-4 py-2 text-black font-medium"
>
{{ student.firstName }}
</td>
<td
class="border border-emerald-500 px-4 py-2 text-black font-medium"
>
{{ student.lastName }}
</td>
<td
class="border border-emerald-500 px-4 py-2 text-black font-medium"
>
{{ student.email }}
</td>
</tr>
</tbody>
</table>
</section>Make sure to open the above implementation in full page. You can check by editing the value in the table cell also .
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | Mohit Maroliya B17CS036 |