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>
Need even more robust tables? Try Data Den.
- Quick customization & hyper-focus on data management
- Easily integrate it with any project (not only MDB)
- Column Pinning, Drag&Drop Columns, Advanced Filtering & much more
For enterprise projects & users seeking advanced data controls. Tailor your data your way.
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>