title: How to prevent table from resizing in Tailwind css?
body: <p>So, i have this table</p>
  <pre><code>&lt; table class=&quot;table-fixed border-separate border border-green-800&quot;&gt;
            &lt; thead class=&quot;bg-indigo-800 border-b-2 border-indigo-200 w-full&quot;&gt;
              &lt; tr&gt;
                &lt; th
                  class=&quot;px-4 py-2 text-white min-w-10 max-w-10&quot;
                  v-if=&quot;isEditable&quot;
                &gt;
                    Select
       
                &lt;/th&gt;
                &lt; th
                  class=&quot;px-4 py-2 text-white min-w-20 max-w-20&quot;
                  @click=&quot;setSort('username')&quot;
                &gt;
                  
                    Username
                &lt;/th&gt;
                &lt; th
                  class=&quot;px-4 py-2 text-white min-w-30 max-w-30&quot;
                  @click=&quot;setSort('firstName')&quot;
                &gt;
                 
                    Name
                 
                &lt;/th&gt;
                &lt; th
                  class=&quot;px-4 py-2 text-white min-w-30 max-w-30&quot;
                  @click=&quot;setSort('lastName')&quot;
                &gt;
                    Surname
                &lt;/th&gt;
                &lt; th
                  class=&quot;px-4 py-2 text-white min-w-40 max-w-40&quot;
                  @click=&quot;setSort('email')&quot;
                &gt;
                    Email
                 
                &lt;/th&gt;
              &lt;/tr&gt;
            &lt;/thead&gt;
            &lt; tbody class=&quot;divide-y divide-grey-100&quot;&gt;
              &lt; tr
                v-for=&quot;student in studentsToshow&quot;
                :key=&quot;student.id&quot;
                :class=&quot;[
                  isStudentSelected(student.id)
                    ? 'bg-blue-500 ring ring-blue-300'
                    : '',
                ]&quot;
              &gt;
                &lt; td
                  class=&quot;border border-emerald-500 px-4 py-2 w-10&quot;
                  v-if=&quot;isEditable&quot;
                &gt;
                  &lt; input
                    type=&quot;checkbox&quot;
                    v-model=&quot;selectedStudents&quot;
                    :id=&quot;student.id&quot;
                    :value=&quot;student&quot;
                    class=&quot;form-checkbox rounded text-indigo-600 mr-2 focus:ring-indigo-600&quot;
                  /&gt;
                &lt;/td&gt;
                &lt; td
                  class=&quot;border border-emerald-500 px-4 py-2 text-black font-medium&quot;
                &gt;
                  {{ student.username }}
                &lt;/td&gt;
                &lt; td`enter code here`
                  class=&quot;border border-emerald-500 px-4 py-2 text-black font-medium&quot;
                &gt;
                  {{ student.firstName }}
                &lt;/td&gt;
                &lt; td
                  class=&quot;border border-emerald-500 px-4 py-2 text-black font-medium&quot;
                &gt;
                  {{ student.lastName }}
                &lt;/td&gt;
                &lt; td
                  class=&quot;border border-emerald-500 px-4 py-2 text-black font-medium&quot;
                &gt;
                  {{ student.email }}
                &lt;/td&gt;
              &lt;/tr&gt;
            &lt;/tbody&gt;
          &lt;/table&gt;
  </code></pre>
  <p>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</p>