How to Customize Bootstrap Table Column Width: 3 Examples!

Bootstrap tables have different column width behavior based on the combination of table-layout styling and column width styling. In this tutorial we will explore how default table-layout, width: auto, and table-layout: fixed on the table affect column width. We will then customize table column width.

Here are the three tables we will create. Each has a different combination of table layout and column width:

It’s important to note that there are no “column” components or elements in Bootstrap. Instead, the width of the header cell or a content cell affects the width of the column of cells.

This tutorial uses react-bootstrap Table component, but the classes and examples also work with plain bootstrap.

Bootstrap Default Table Layout and Column Width

The default table-layout value is auto. The following are the observable results of table-layout: auto.

• The table uses full width available
• Column width is dynamic based on content width
• Custom column width styling is observed by the table but width will be reduced if there is not enough space
• It forces a scrollbar at the bottom when screen size is too small

Here is a snippet of the relevant code from my default example. Remember I used react-bootstrap. I set one column to 8rem and another to 20% width to see what would happen:

//css
.th-lg {
  width: 8rem;
}

.th-lg-percent {
  width: 20%;
}

//jsx
<Table>
        <thead>
          <tr>
            <th>#</th>
            <th className="">HeadingZZZZZZZZZZ</th>
            <th className="th-lg">Heading</th>
            <th className="th-lg-percent">Heading</th>
            <th>Heading</th>
            <th>Heading</th>
          </tr>
        </thead>
        <tbody>
//...more table JSX

Here’s the table at a screen size too narrow for the rem width to properly be applied:

The % width is still in effect for the third column. The second column (8rem width) is the same width as the fourth and fifth column at about 80px.

Additionally, the table forces a scrollbar on the page (not shown) instead of shrinking any column to the point of overflow.

I had to create my own classes. If you are searching the internet for column width, you might find some mdbootstrap articles that mention th-lg, but that is a proprietary mdbootstrap class.

Read here how to set size of Bootstrap Icon Buttons, and here how to control table row and cell height.

Bootstrap Table with Auto Width and Column Width

The second Table is using a built-in bootstrap class w-auto. This does not use the table-layout value, but instead applies width: auto !important on the table element. The following are the observable results of width: auto.

• The table does not use full width, but instead only the necessary width based on total combined column width
• Column width is dynamic based on content width
• Custom column width styling is observed by the table but width will be reduced if there is not enough space
• It forces a scrollbar at the bottom when screen size is too small

If you want to set fixed column widths that don’t expand when there is extra horizontal space, you want width: auto on your table element or component.

I’ve expanded the screen size beyond what’s needed. Notice the table does not fill up the space:

The code is almost the same as example one except that I don’t have class th-lg-percent on any column. Also the Table component has a different class:

<Table className="w-auto">

Bootstrap Table with Table Layout Fixed and Column Width

The third table is built using table-layout: fixed. While it sounds like this would fix column sizes so that they don’t expand, it actually fixes the columns in equal proportion regardless of content width. Here are the observable results:

• The table uses full width available
• Column width is fixed and NOT based on content width
• Custom column width styling is observed by the table and does not reduce.
• It does not force a scrollbar at the bottom when screen size is small. Instead, content compresses (except for columns with a specified width

I’ve added a class named ellipses but this shows how small the table can go:

This example only has classes at the Table level:

//css
.fixed-table {
  table-layout: fixed;
}

.ellipses th,
.ellipses td {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

//jsx
<Table className="fixed-table ellipses">
        <thead>
          <tr>
            <th>#</th>
            <th>HeadingZZZZZZZZZZ</th>
            <th>Heading</th>
            <th>Heading</th>
            <th>Heading</th>
            <th>Heading</th>
          </tr>
        </thead>
        <tbody>
//more jsx

The ellipses class applies the three required styles to render a cell with ellipses when the width is too small for the content.

Read this if you need a guide to padding in your bootstrap table and this for some background color tips.