-1

I have this table and need to remove the extra space so that I can add other columns to the table without having to scroll vertically, and so that the space is used perfectly.

Here is the code:

<table id="" class="table table-report -mt-2">

    <thead>
        <tr>
            <th class="whitespace-nowrap">NO</th>
            <th class="text-center whitespace-nowrap cursor-pointer sortup">User name <i  class="mx-1 fa-solid fa-sort-up sortup"></i>
            </th>
            <th class="text-center whitespace-nowrap sortup">Email <i  class="mx-1 fa-solid fa-sort-up sortup"></i></th>
            <th class="whitespace-nowrap sortup">Date <i  class="mx-1 fa-solid fa-sort-up sortup"></i></th>
            <th class="whitespace-nowrap sortup">Time <i  class="mx-1 fa-solid fa-sort-up sortup"></i></th>
        </tr>
    </thead>
    <tbody id="">
        

        <tr class="intro-x">

            <td class="" id="">
                <input id="" type="checkbox" value="" class=" w-4 mr-5 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 ">
            </td>

            <td class="text-center"> Test User </td>
            <td class="text-center"> Test Email</td>
            <td class="text-center">
        
                    Test Date
    
            </td>
            <td>
            Test Time
            </td>

        </tr>
    
    </tbody>
</table>

Here is a screenshot:

d

Andreas Violaris
  • 2,465
  • 5
  • 13
  • 26
The Code Whisperer
  • 1,105
  • 1
  • 3
  • 10
  • Looking at [the rendered code](https://codepen.io/kikosoft/pen/WNaEZwj), I do not understand your question. – KIKO Software Apr 29 '23 at 17:54
  • How can I add rendered or preview to my code? – The Code Whisperer Apr 29 '23 at 17:58
  • 1
    I think you did it by adding the image. I now think your question is: _"I have a table that is as wide as my HTML page. Now I want to add another column in that table, but how can I create the space needed for that column?"_. My answer would be: Have you tried to add the column? I think the space will be created automatically. – KIKO Software Apr 29 '23 at 18:25
  • 1
    And if the question is how to remove the "empty space" between the columns: It's just that the columns are so wide. In your CSS you'll have something like "width: 100%" on your table so it stretches as much as it can. Remove it and the columns are as wide as they need to be – Kadser Apr 29 '23 at 19:43
  • Thanks a bunch dears, I created new column and removed width:100%, thanks both – The Code Whisperer Apr 29 '23 at 22:11

1 Answers1

1

To remove extra space between the table cells and allow new columns to be added without causing horizontal scrolling, you can add the following CSS to the table:

table {
    border-collapse: collapse;
}

td, th {
    padding: 0;
    border: none;
}

This will collapse the borders between the cells and remove any padding, resulting in a tighter layout. You can adjust the padding value if you need some space between the cells.

Gaya3 Govindaraj
  • 73
  • 5