Table column width

Bootstrap 5 Table column width component

Responsive Table column width built with Bootstrap 5. Use one of the following classes to manipulate the width of the columns.

Detailed documentation and more examples of Bootstrap table column width you can find in our Bootstrap Table Responsive Docs and Bootstrap Tables Docs.


With auto width

Add .w-auto class to the table element to set an auto width to the table column.

The width of the columns will automatically adjust to the content of the column. That means it will always take a minimum width required to present its content.

# Name Surname Country City Position Age
1 Kate Moss USA New York City Web Designer 23
2 Anna Wintour United Kingdom London Frontend Developer 36
3 Tom Bond Spain Madrid Photographer 25
4 Jerry Horwitz Italy Bari Editor-in-chief 41
5 Janis Joplin Poland Warsaw Video Maker 39
6 Gary Winogrand Germany Berlin Photographer 37
7 Angie Smith USA San Francisco Teacher 52
8 John Mattis France Paris Actor 28
9 Otto Morris Germany Munich Singer 35
        
            
                <section>
                    <!--Table-->
                    <table class="table table-striped w-auto">
                        <!--Table head-->
                        <thead>
                            <tr>
                                <th>#</th>
                                <th>Name</th>
                                <th>Surname</th>
                                <th>Country</th>
                                <th>City</th>
                                <th>Position</th>
                                <th>Age</th>
                            </tr>
                        </thead>
                        <!--Table head-->

                        <!--Table body-->
                        <tbody>
                            <tr class="table-info">
                                <th scope="row">1</th>
                                <td>Kate</td>
                                <td>Moss</td>
                                <td>USA</td>
                                <td>New York City</td>
                                <td>Web Designer</td>
                                <td>23</td>
                            </tr>
                            <tr>
                                <th scope="row">2</th>
                                <td>Anna</td>
                                <td>Wintour</td>
                                <td>United Kingdom</td>
                                <td>London</td>
                                <td>Frontend Developer</td>
                                <td>36</td>
                            </tr>
                            <tr class="table-info">
                                <th scope="row">3</th>
                                <td>Tom</td>
                                <td>Bond</td>
                                <td>Spain</td>
                                <td>Madrid</td>
                                <td>Photographer</td>
                                <td>25</td>
                            </tr>
                            <tr>
                                <th scope="row">4</th>
                                <td>Jerry</td>
                                <td>Horwitz</td>
                                <td>Italy</td>
                                <td>Bari</td>
                                <td>Editor-in-chief</td>
                                <td>41</td>
                            </tr>
                            <tr class="table-info">
                                <th scope="row">5</th>
                                <td>Janis</td>
                                <td>Joplin</td>
                                <td>Poland</td>
                                <td>Warsaw</td>
                                <td>Video Maker</td>
                                <td>39</td>
                            </tr>
                            <tr>
                                <th scope="row">6</th>
                                <td>Gary</td>
                                <td>Winogrand</td>
                                <td>Germany</td>
                                <td>Berlin</td>
                                <td>Photographer</td>
                                <td>37</td>
                            </tr>
                            <tr class="table-info">
                                <th scope="row">7</th>
                                <td>Angie</td>
                                <td>Smith</td>
                                <td>USA</td>
                                <td>San Francisco</td>
                                <td>Teacher</td>
                                <td>52</td>
                            </tr>
                            <tr>
                                <th scope="row">8</th>
                                <td>John</td>
                                <td>Mattis</td>
                                <td>France</td>
                                <td>Paris</td>
                                <td>Actor</td>
                                <td>28</td>
                            </tr>
                            <tr class="table-info">
                                <th scope="row">9</th>
                                <td>Otto</td>
                                <td>Morris</td>
                                <td>Germany</td>
                                <td>Munich</td>
                                <td>Singer</td>
                                <td>35</td>
                            </tr>
                        </tbody>
                        <!--Table body-->
                    </table>
                    <!--Table-->
                </section>
                
        
    

With minimal width

Use .th-lg or .th-sm class to set a minimal width of a table column. .th-lg class gives 9 rem of the minimal width of the column and .th-sm class gives 6 rem.

You have to add .th-lg or th.sm class to the <th> element within the <thead>.

Resize the browser window to see the effect.

.th-lg - 9 rem minimal width of the column

# Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor
1 Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor
2 Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor
3 Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor

.th-sm - 6 rem minimal width of the column

# Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor
1 Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor
2 Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor
3 Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor
        
            
                <!--Section: Live preview-->
                <section>
                    <p class="mt-4">
                        <strong> <code>.th-lg</code> - 9 rem minimal width of the column</strong>
                    </p>

                    <div class="table-responsive">
                        <!--Table-->
                        <table class="table">
                            <!--Table head-->
                            <thead>
                                <tr>
                                    <th>#</th>
                                    <th class="th-lg">Lorem ipsum dolor</th>
                                    <th class="th-lg">Lorem ipsum dolor</th>
                                    <th class="th-lg">Lorem ipsum dolor</th>
                                </tr>
                            </thead>
                            <!--Table head-->

                            <!--Table body-->
                            <tbody>
                                <tr>
                                    <th scope="row">1</th>
                                    <td>Lorem ipsum dolor</td>
                                    <td>Lorem ipsum dolor</td>
                                    <td>Lorem ipsum dolor</td>
                                </tr>
                                <tr>
                                    <th scope="row">2</th>
                                    <td>Lorem ipsum dolor</td>
                                    <td>Lorem ipsum dolor</td>
                                    <td>Lorem ipsum dolor</td>
                                </tr>
                                <tr>
                                    <th scope="row">3</th>
                                    <td>Lorem ipsum dolor</td>
                                    <td>Lorem ipsum dolor</td>
                                    <td>Lorem ipsum dolor</td>
                                </tr>
                            </tbody>
                            <!--Table body-->
                        </table>
                        <!--Table-->
                    </div>
                </section>
                <!--Section: Live preview-->

                <!--Section: Live preview-->
                <section>
                    <p class="mt-4">
                        <strong> <code>.th-sm</code> - 6 rem minimal width of the column</strong>
                    </p>

                    <div class="table-responsive">
                        <!--Table-->
                        <table class="table">
                            <!--Table head-->
                            <thead>
                                <tr>
                                    <th>#</th>
                                    <th class="th-sm">Lorem ipsum dolor</th>
                                    <th class="th-sm">Lorem ipsum dolor</th>
                                    <th class="th-sm">Lorem ipsum dolor</th>
                                </tr>
                            </thead>
                            <!--Table head-->

                            <!--Table body-->
                            <tbody>
                                <tr>
                                    <th scope="row">1</th>
                                    <td>Lorem ipsum dolor</td>
                                    <td>Lorem ipsum dolor</td>
                                    <td>Lorem ipsum dolor</td>
                                </tr>
                                <tr>
                                    <th scope="row">2</th>
                                    <td>Lorem ipsum dolor</td>
                                    <td>Lorem ipsum dolor</td>
                                    <td>Lorem ipsum dolor</td>
                                </tr>
                                <tr>
                                    <th scope="row">3</th>
                                    <td>Lorem ipsum dolor</td>
                                    <td>Lorem ipsum dolor</td>
                                    <td>Lorem ipsum dolor</td>
                                </tr>
                            </tbody>
                            <!--Table body-->
                        </table>
                        <!--Table-->
                    </div>
                </section>
                <!--Section: Live preview-->
                
        
    

With fixed width

Add .table-fixed class to the table element to set a fixed width to the all columns of the table.

A .table-fixed get a table a lot sturdier and more predictable with property/value in place.

When you are use .table-fixed layout of your table is based on the first row.

# Name Surname Country City Position Age
4 Jerry Horwitz Italy Bari Editor-in-chief 41
5 Janis Joplin Poland Warsaw Video Maker 39
6 Gary Winogrand Germany Berlin Photographer 37
7 Angie Smith USA San Francisco Teacher 52
8 John Mattis France Paris Actor 28
9 Otto Morris Germany Munich Singer 35
        
            
                <section>
                    <!--Table-->
                    <table class="table table-hover table-fixed">
                        <!--Table head-->
                        <thead>
                            <tr>
                                <th>#</th>
                                <th>Name</th>
                                <th>Surname</th>
                                <th>Country</th>
                                <th>City</th>
                                <th>Position</th>
                                <th>Age</th>
                            </tr>
                        </thead>
                        <!--Table head-->

                        <!--Table body-->
                        <tbody>
                            <tr>
                                <th scope="row">4</th>
                                <td>Jerry</td>
                                <td>Horwitz</td>
                                <td>Italy</td>
                                <td>Bari</td>
                                <td>Editor-in-chief</td>
                                <td>41</td>
                            </tr>
                            <tr>
                                <th scope="row">5</th>
                                <td>Janis</td>
                                <td>Joplin</td>
                                <td>Poland</td>
                                <td>Warsaw</td>
                                <td>Video Maker</td>
                                <td>39</td>
                            </tr>
                            <tr>
                                <th scope="row">6</th>
                                <td>Gary</td>
                                <td>Winogrand</td>
                                <td>Germany</td>
                                <td>Berlin</td>
                                <td>Photographer</td>
                                <td>37</td>
                            </tr>
                            <tr>
                                <th scope="row">7</th>
                                <td>Angie</td>
                                <td>Smith</td>
                                <td>USA</td>
                                <td>San Francisco</td>
                                <td>Teacher</td>
                                <td>52</td>
                            </tr>
                            <tr>
                                <th scope="row">8</th>
                                <td>John</td>
                                <td>Mattis</td>
                                <td>France</td>
                                <td>Paris</td>
                                <td>Actor</td>
                                <td>28</td>
                            </tr>
                            <tr>
                                <th scope="row">9</th>
                                <td>Otto</td>
                                <td>Morris</td>
                                <td>Germany</td>
                                <td>Munich</td>
                                <td>Singer</td>
                                <td>35</td>
                            </tr>
                        </tbody>
                        <!--Table body-->
                    </table>
                    <!--Table-->
                </section>
                
        
    

With text-nowrap

With class .text-nowrap you can specific how white-space inside an table is handled.

Sequences of white space are preserved. Lines are broken at newline characters, at br, and as necessary to fill line boxes.

If you want use a .text-nowrap you have to use div wrapper with .table-responsive class because your table will be broken on small on small screens.

For example here is table with text-nowrap class:

# Name Surname Country City Position Age
1 Kate Moss USA / The United Kingdom / China / Russia New York City / Warsaw / Lodz / Amsterdam / London / Chicago Web Designer /UX designer / Ul designer / JavaScript Developer 23
2 Anna Wintour USA / The United Kingdom / China / Russia New York City / Warsaw / Lodz / Amsterdam / London / Chicago Web Designer /UX designer / Ul designer / JavaScript Developer 36
3 Tom Bond USA / The United Kingdom / China / Russia New York City / Warsaw / Lodz / Amsterdam / London / Chicago Web Designer /UX designer / Ul designer / JavaScript Developer 25
4 Jerry Horwitz USA / The United Kingdom / China / Russia New York City / Warsaw / Lodz / Amsterdam / London / Chicago Web Designer /UX designer / Ul designer / JavaScript Developer 41
5 Janis Joplin USA / The United Kingdom / China / Russia New York City / Warsaw / Lodz / Amsterdam / London / Chicago Web Designer /UX designer / Ul designer / JavaScript Developer 39
6 Gary Winogrand USA / The United Kingdom / China / Russia New York City / Warsaw / Lodz / Amsterdam / London / Chicago Web Designer /UX designer / Ul designer / JavaScript Developer 37
7 Angie Smith USA / The United Kingdom / China / Russia New York City / Warsaw / Lodz / Amsterdam / London / Chicago Web Designer /UX designer / Ul designer / JavaScript Developer 52
8 John Mattis USA / The United Kingdom / China / Russia New York City / Warsaw / Lodz / Amsterdam / London / Chicago Web Designer /UX designer / Ul designer / JavaScript Developer 28
9 Otto Morris USA / The United Kingdom / China / Russia New York City / Warsaw / Lodz / Amsterdam / London / Chicago Web Designer /UX designer / Ul designer / JavaScript Developer 35
        
            
                <section>
                    <div class="table-responsive text-nowrap">
                        <!--Table-->
                        <table class="table table-striped">
                            <!--Table head-->
                            <thead>
                                <tr>
                                    <th>#</th>
                                    <th>Name</th>
                                    <th>Surname</th>
                                    <th>Country</th>
                                    <th>City</th>
                                    <th>Position</th>
                                    <th>Age</th>
                                </tr>
                            </thead>
                            <!--Table head-->

                            <!--Table body-->
                            <tbody>
                                <tr>
                                    <th scope="row">1</th>
                                    <td>Kate</td>
                                    <td>Moss</td>
                                    <td>USA / The United Kingdom / China / Russia</td>
                                    <td>New York City / Warsaw / Lodz / Amsterdam / London / Chicago</td>
                                    <td>Web Designer /UX designer / Ul designer / JavaScript Developer</td>
                                    <td>23</td>
                                </tr>
                                <tr>
                                    <th scope="row">2</th>
                                    <td>Anna</td>
                                    <td>Wintour</td>
                                    <td>USA / The United Kingdom / China / Russia</td>
                                    <td>New York City / Warsaw / Lodz / Amsterdam / London / Chicago</td>
                                    <td>Web Designer /UX designer / Ul designer / JavaScript Developer</td>
                                    <td>36</td>
                                </tr>
                                <tr>
                                    <th scope="row">3</th>
                                    <td>Tom</td>
                                    <td>Bond</td>
                                    <td>USA / The United Kingdom / China / Russia</td>
                                    <td>New York City / Warsaw / Lodz / Amsterdam / London / Chicago</td>
                                    <td>Web Designer /UX designer / Ul designer / JavaScript Developer</td>
                                    <td>25</td>
                                </tr>
                                <tr>
                                    <th scope="row">4</th>
                                    <td>Jerry</td>
                                    <td>Horwitz</td>
                                    <td>USA / The United Kingdom / China / Russia</td>
                                    <td>New York City / Warsaw / Lodz / Amsterdam / London / Chicago</td>
                                    <td>Web Designer /UX designer / Ul designer / JavaScript Developer</td>
                                    <td>41</td>
                                </tr>
                                <tr>
                                    <th scope="row">5</th>
                                    <td>Janis</td>
                                    <td>Joplin</td>
                                    <td>USA / The United Kingdom / China / Russia</td>
                                    <td>New York City / Warsaw / Lodz / Amsterdam / London / Chicago</td>
                                    <td>Web Designer /UX designer / Ul designer / JavaScript Developer</td>
                                    <td>39</td>
                                </tr>
                                <tr>
                                    <th scope="row">6</th>
                                    <td>Gary</td>
                                    <td>Winogrand</td>
                                    <td>USA / The United Kingdom / China / Russia</td>
                                    <td>New York City / Warsaw / Lodz / Amsterdam / London / Chicago</td>
                                    <td>Web Designer /UX designer / Ul designer / JavaScript Developer</td>
                                    <td>37</td>
                                </tr>
                                <tr>
                                    <th scope="row">7</th>
                                    <td>Angie</td>
                                    <td>Smith</td>
                                    <td>USA / The United Kingdom / China / Russia</td>
                                    <td>New York City / Warsaw / Lodz / Amsterdam / London / Chicago</td>
                                    <td>Web Designer /UX designer / Ul designer / JavaScript Developer</td>
                                    <td>52</td>
                                </tr>
                                <tr>
                                    <th scope="row">8</th>
                                    <td>John</td>
                                    <td>Mattis</td>
                                    <td>USA / The United Kingdom / China / Russia</td>
                                    <td>New York City / Warsaw / Lodz / Amsterdam / London / Chicago</td>
                                    <td>Web Designer /UX designer / Ul designer / JavaScript Developer</td>
                                    <td>28</td>
                                </tr>
                                <tr>
                                    <th scope="row">9</th>
                                    <td>Otto</td>
                                    <td>Morris</td>
                                    <td>USA / The United Kingdom / China / Russia</td>
                                    <td>New York City / Warsaw / Lodz / Amsterdam / London / Chicago</td>
                                    <td>Web Designer /UX designer / Ul designer / JavaScript Developer</td>
                                    <td>35</td>
                                </tr>
                            </tbody>
                            <!--Table body-->
                        </table>
                        <!--Table-->
                    </div>
                </section>