Adjusting the width of columns in a table

Question

Adjusting the width of columns in a table

Previously in Bootstrap 3, I was able to use col-sm-xx on the th tags within the thead to resize table columns as needed. However, this functionality is no longer available in Bootstrap 4. How can I achieve a similar effect in Bootstrap 4?

<thead>
<th class="col-sm-3">3 columns wide</th>
<th class="col-sm-5">5 columns wide</th>
<th class="col-sm-4">4 columns wide</th>
</thead>

When looking at the provided codeply example, it is clear that the sizing does not work properly, especially when adding data to the table. See how it behaves:

<div class="container" style="border: 1px solid black;">
    <table class="table table-bordered">
    <thead>
        <tr class="row">
            <th class="col-sm-3">3 columns wide</th>
            <th class="col-sm-5">5 columns wide</th>
            <th class="col-sm-4">4 columns wide</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>123</td>
            <td>456</td>
            <td>789</td>
        </tr>
    </tbody>
</table>
</div>

css twitter-bootstrap html-table bootstrap-4

Answer 1

Answer №1

Latest Update in 2018

When creating a table, it is important to include the table class. This is because Bootstrap 4 tables require intentional opt-in, meaning the table class must be specifically added to the table.

For more information and examples, visit:

In Bootstrap 3.x, there was CSS code to reset table cells so they don't float...

table td[class*=col-], table th[class*=col-] {
    position: static;
    display: table-cell;
    float: none;
}

Although this feature isn't included in Bootstrap 4 alpha versions, it may be reinstated in the final release. By adding this CSS, all columns will utilize the specified widths in the thead.

To see a demo of Bootstrap 4 Alpha 2, click here: Bootstrap 4 Alpha 2 Demo

LATEST UPDATE (as of Bootstrap 4.0.0)

With Bootstrap 4 now using flexbox, table cells won't automatically adjust width when using col-*. To work around this issue, apply the d-inline-block class on the table cells to avoid the default column display:flex.

Another option in Bootstrap 4 is to utilize sizing utility classes for setting widths...

<thead>
     <tr>
           <th class="w-25">25</th>
           <th class="w-50">50</th>
           <th class="w-25">25</th>
     </tr>
</thead>

To view a demonstration of Bootstrap 4 Alpha 6, follow this link: Bootstrap 4 Alpha 6 Demo

Lastly, applying d-flex on table rows (tr), with col-* grid classes on columns (th,td) can be useful...

<table class="table table-bordered">
        <thead>
            <tr class="d-flex">
                <th class="col-3">25%</th>
                <th class="col-3">25%</th>
                <th class="col-6">50%</th>
            </tr>
        </thead>
        <tbody>
            <tr class="d-flex">
                <td class="col-sm-3">..</td>
                <td class="col-sm-3">..</td>
                <td class="col-sm-6">..</td>
            </tr>
        </tbody>
    </table>

For a live example of Bootstrap 4.0.0 stable version, check out: Bootstrap 4.0.0 (stable) Demo

Please note that changing TR to display:flex might have an impact on borders. Read more about it here

Answer 2

Latest Update in 2018

When creating a table, it is important to include the table class. This is because Bootstrap 4 tables require intentional opt-in, meaning the table class must be specifically added to the table.

For more information and examples, visit:

In Bootstrap 3.x, there was CSS code to reset table cells so they don't float...

table td[class*=col-], table th[class*=col-] {
    position: static;
    display: table-cell;
    float: none;
}

Although this feature isn't included in Bootstrap 4 alpha versions, it may be reinstated in the final release. By adding this CSS, all columns will utilize the specified widths in the thead.

To see a demo of Bootstrap 4 Alpha 2, click here: Bootstrap 4 Alpha 2 Demo

LATEST UPDATE (as of Bootstrap 4.0.0)

With Bootstrap 4 now using flexbox, table cells won't automatically adjust width when using col-*. To work around this issue, apply the d-inline-block class on the table cells to avoid the default column display:flex.

Another option in Bootstrap 4 is to utilize sizing utility classes for setting widths...

<thead>
     <tr>
           <th class="w-25">25</th>
           <th class="w-50">50</th>
           <th class="w-25">25</th>
     </tr>
</thead>

To view a demonstration of Bootstrap 4 Alpha 6, follow this link: Bootstrap 4 Alpha 6 Demo

Lastly, applying d-flex on table rows (tr), with col-* grid classes on columns (th,td) can be useful...

<table class="table table-bordered">
        <thead>
            <tr class="d-flex">
                <th class="col-3">25%</th>
                <th class="col-3">25%</th>
                <th class="col-6">50%</th>
            </tr>
        </thead>
        <tbody>
            <tr class="d-flex">
                <td class="col-sm-3">..</td>
                <td class="col-sm-3">..</td>
                <td class="col-sm-6">..</td>
            </tr>
        </tbody>
    </table>

For a live example of Bootstrap 4.0.0 stable version, check out: Bootstrap 4.0.0 (stable) Demo

Please note that changing TR to display:flex might have an impact on borders. Read more about it here

Answer 3

Answer №2

If you're looking for an alternative approach, you can utilize flex styling directly on the table row and then assign the col-classes to the table header or table data elements:

<table>
  <thead>
    <tr class="d-flex">
      <th class="col-3">Header with 3 columns width</th>
      <th class="col-sm-5">Header with 5 columns width</th>
      <th class="col-sm-4">Header with 4 columns width</th>
    </tr>
  </thead>
  <tbody>
    <tr class="d-flex">
      <td class="col-3">Content with 3 columns width</th>
      <td class="col-sm-5">Content with 5 columns width</th>
      <td class="col-sm-4">Content with 4 columns width</th>
    </tr>
  </tbody>
</table>

Answer 4

If you're looking for an alternative approach, you can utilize flex styling directly on the table row and then assign the col-classes to the table header or table data elements:

<table>
  <thead>
    <tr class="d-flex">
      <th class="col-3">Header with 3 columns width</th>
      <th class="col-sm-5">Header with 5 columns width</th>
      <th class="col-sm-4">Header with 4 columns width</th>
    </tr>
  </thead>
  <tbody>
    <tr class="d-flex">
      <td class="col-3">Content with 3 columns width</th>
      <td class="col-sm-5">Content with 5 columns width</th>
      <td class="col-sm-4">Content with 4 columns width</th>
    </tr>
  </tbody>
</table>

Answer 5

Answer №3

When using the d-flex class, everything works smoothly except for certain attributes like the vertical-align: middle property.

A helpful way I discovered to easily size columns is by utilizing the width attribute with percentage values specifically in the thead cells.

<table class="table">
    <thead>
        <tr>
            <th width="25%">25%</th>
            <th width="25%">25%</th>
            <th width="50%">50%</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>25%</td>
            <td>25%</td>
            <td>50%</td>
        </tr>
    </tbody>
</table>

Answer 6

When using the d-flex class, everything works smoothly except for certain attributes like the vertical-align: middle property.

A helpful way I discovered to easily size columns is by utilizing the width attribute with percentage values specifically in the thead cells.

<table class="table">
    <thead>
        <tr>
            <th width="25%">25%</th>
            <th width="25%">25%</th>
            <th width="50%">50%</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>25%</td>
            <td>25%</td>
            <td>50%</td>
        </tr>
    </tbody>
</table>

Answer 7

Answer №4

Here is my custom solution that I developed for Bootstrap 4.1.1 before coming across a similar post by @florian_korner.

If you are using sass, simply add this code snippet at the end of your bootstrap includes. It resolves compatibility issues with Chrome, IE, and Edge without causing any problems in Firefox.

@mixin make-td-col($size, $columns: $grid-columns) {
    width: percentage($size / $columns);
}

@each $breakpoint in map-keys($grid-breakpoints) {
    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);

    @for $i from 1 through $grid-columns {
        td.col#{$infix}-#{$i}, th.col#{$infix}-#{$i} {
            @include make-td-col($i, $grid-columns);
        }
    }
}

If you only need the compiled CSS utility, here it is:

[...]

Answer 8

Here is my custom solution that I developed for Bootstrap 4.1.1 before coming across a similar post by @florian_korner.

If you are using sass, simply add this code snippet at the end of your bootstrap includes. It resolves compatibility issues with Chrome, IE, and Edge without causing any problems in Firefox.

@mixin make-td-col($size, $columns: $grid-columns) {
    width: percentage($size / $columns);
}

@each $breakpoint in map-keys($grid-breakpoints) {
    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);

    @for $i from 1 through $grid-columns {
        td.col#{$infix}-#{$i}, th.col#{$infix}-#{$i} {
            @include make-td-col($i, $grid-columns);
        }
    }
}

If you only need the compiled CSS utility, here it is:

[...]

Answer 9

Answer №5

Important Note: Please be aware that this answer contains information that may no longer be up-to-date. Bootstrap 4 has undergone changes since its beta release.

The class for defining table column size has been modified as shown below:

<th class="col-md-4">4 columns wide</th>

To:

<th class="col-4">4 columns wide</th>

Answer 10

Important Note: Please be aware that this answer contains information that may no longer be up-to-date. Bootstrap 4 has undergone changes since its beta release.

The class for defining table column size has been modified as shown below:

<th class="col-md-4">4 columns wide</th>

To:

<th class="col-4">4 columns wide</th>

Answer 11

Answer №6

To tackle this issue, I have come up with a solution that involves using Bootstrap 4 components:

<table class="table">
  <tbody>
    <tr class="d-flex">
      <th class="col-3" scope="row">Indicator:</th>
      <td class="col-9">Here goes the indicator</td>
    </tr>

    <tr class="d-flex">
      <th class="col-3" scope="row">Definition:</th>
      <td class="col-9">This is how I define it</td>
    </tr>

  </tbody>
</table>

Answer 12

To tackle this issue, I have come up with a solution that involves using Bootstrap 4 components:

<table class="table">
  <tbody>
    <tr class="d-flex">
      <th class="col-3" scope="row">Indicator:</th>
      <td class="col-9">Here goes the indicator</td>
    </tr>

    <tr class="d-flex">
      <th class="col-3" scope="row">Definition:</th>
      <td class="col-9">This is how I define it</td>
    </tr>

  </tbody>
</table>

Answer 13

Answer №7

Starting from Alpha 6, you have the ability to generate this unique sass file:

@each $breakpoint in map-keys($grid-breakpoints) {
  $infix: breakpoint-infix($breakpoint, $grid-breakpoints);

  col, th, td {
    @for $i from 1 through $grid-columns {
        &.col#{$infix}-#{$i} {
          flex: none;
          position: initial;
        }
    }

    @include media-breakpoint-up($breakpoint, $grid-breakpoints) {
      @for $i from 1 through $grid-columns {
        &.col#{$infix}-#{$i} {
          width: calc(100% / #{$grid-columns} * #{$i});
        }
      }
    }
  }
}

Answer 14

Starting from Alpha 6, you have the ability to generate this unique sass file:

@each $breakpoint in map-keys($grid-breakpoints) {
  $infix: breakpoint-infix($breakpoint, $grid-breakpoints);

  col, th, td {
    @for $i from 1 through $grid-columns {
        &.col#{$infix}-#{$i} {
          flex: none;
          position: initial;
        }
    }

    @include media-breakpoint-up($breakpoint, $grid-breakpoints) {
      @for $i from 1 through $grid-columns {
        &.col#{$infix}-#{$i} {
          width: calc(100% / #{$grid-columns} * #{$i});
        }
      }
    }
  }
}

Adjusting the width of columns in a table

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Answer №7

Similar questions

The image fails to reach full width and does not expand correctly when I zoom out

What could be the reason for the top alignment of only a portion of the cell

Trouble with implementing conditional styles in Next JS

How do you use CSS to replace an HTML "rules" attribute?

Neatly incorporating a checkbox into a miniaturized image

Please request user input in order to generate a multiplication chart

JavaScript and CSS animations out of sync in terms of timing

Preventing overlapping of a "position-fixed" element with variable size: Effective strategies

Tips for Resizing google reCAPTCHA

HTML input field's placeholder text is truncated at the end

Ways to manipulate a div tag with CSS even when it lacks a class or ID attribute

Adjusting the Height of the Video Jumbotron in Bootstrap

Understanding the usage of jQuery transitionend to prevent interruptions in CSS animations

"Explore the functionalities of Drupal's innovative Menu module: How sub-sub menus can take precedence over sub-menus

How to Align Title in the Center of a Section Containing Multiple Images?

The stacking order of elements is not affected by the z-index property when using absolute positioning

Isotope grid shatters when browser window is resized

Is it possible to customize the CSS styles of a jQuery UI modal dialog box?

Steps to include a horizontal divider in the footer section of an angular-material table

Today's Date Bootstrap Form