0

I'd like to know a way to align the table head with the table content

The actual result is the following: Actual result

As you can see, those are not aligned. I need columns to be aligned without having a fixed width.

Title column should take all the remaining width.

Here is my actual code:

<div class="table-responsive">
    <table class="table table-bordered">
        <thead>
            <tr class="d-flex">
                <th scope="col" class="col-auto"><i class="fas fa-folder fa-lg"></i></th>
                <th scope="col" class="col">Title</th>
                <th scope="col" class="col-auto">Author</th>
                <th scope="col" class="col-auto">NB</th>
                <th scope="col" class="col-auto">Last activity</th>
            </tr>
        </thead>
        <tbody>
            <tr class="d-flex">
                <td scope="row"><a href=""><i class="fas fa-folder fa-lg"></i></a></td>
                <td class="col"><a href="">flap flap flap</a></td>
                <td><a href="">Dushy</a></td>
                <td>14</td>
                <td>03:20:32</td>
            </tr>
        </tbody>
    </table>
</div>

Thanks for your help!

Dulani Maheshi
  • 1,070
  • 1
  • 10
  • 30
Dushy
  • 37
  • 7

1 Answers1

0

It's because you use col-auto class. Replace col-auto class with col class.

<div class="table-responsive">
    <table class="table table-bordered">
        <thead>
            <tr class="d-flex">
                <th scope="col" class="col-auto"><i class="fas fa-folder fa-lg"></i></th>
                <th scope="col" class="col">Title</th>
                <th scope="col" class="col">Author</th>
                <th scope="col" class="col">NB</th>
                <th scope="col" class="col">Last activity</th>
            </tr>
        </thead>
        <tbody>
            <tr class="d-flex">
                <td scope="col" class="col-auto"><a href=""><i class="fas fa-folder fa-lg"></i></a></td>
                <td scope="col" class="col"><a href="">flap flap flap</a></td>
                <td scope="col" class="col"><a href="">Dushy</a></td>
                <td scope="col" class="col">14</td>
                <td scope="col" class="col">03:20:32</td>
            </tr>
        </tbody>
    </table>
</div>
muhkanda
  • 319
  • 1
  • 9
  • Thanks but that's not the output expected. Author, NB and Last activity must take the least space possible, while Title should take all the remaining space. Here all columns except the first one have equal width – Dushy Apr 01 '21 at 04:40
  • You can use class `col-md-*` or manual style. Here is the reference : https://stackoverflow.com/questions/15115052/how-to-set-up-fixed-width-for-td/34987484#34987484 – muhkanda Apr 01 '21 at 04:47
  • Thanks, but I wanted to avoid fixed width, but I guess that's impossible. – Dushy Apr 01 '21 at 05:40