Is there a way to customize the alignment in a bootstrap table so that all content is left-aligned and the table utilizes only the required space

Question

Is there a way to customize the alignment in a bootstrap table so that all content is left-aligned and the table utilizes only the required space

My goal is to create a table layout as shown below:

[ header  ] [ header 2 ] [ header 3      ]
----------------------------------------------------------------------100%
 cell here   and longer   and even longer
----------------------------------------------------------------------100%
 another     row          here
----------------------------------------------------------------------100%

In the example above, I am aiming for a table with a width of 100%, allowing the striped table rows (i.e.

<table class="table table-striped">

) to span the entire width. However, I need all content to be left-aligned and occupy only the necessary space. I have experimented with different CSS styles such as:

table.something thead th { width: auto !important }
table.something thead th { white-space: nowrap; width: 1%; }
table.something tbody td { white-space: nowrap; width: 1%; }

This customization is required by a specific design specification that has to be adhered to. Otherwise, I would simply stick with the standard Bootstrap table formatting.

html css twitter-bootstrap bootstrap-4

Answer 1

Answer №1

To ensure that the table and its cells adjust to fit the content, set the table-layout to auto. Then, designate the width of the last column as 100% to compress the other columns. To prevent text wrapping in other columns, use white-space: nowrap.

HTML

<table class="table table-striped">
    <thead>
        <tr>
            <th>[header]</th>
            <th>[header 2]</th>
            <th>[header 3]</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>cell here</td>
            <td>longer cell here</td>
            <td>longer longer and even longer cell here</td>
        </tr>
        <tr>
            <td>cell</td>
            <td>longer cell</td>
            <td>longer longer and even longer cell</td>
        </tr>
        <tr>
            <td>cell here here</td>
            <td>longer cell here here</td>
            <td>longer longer and even longer cell here here</td>
        </tr>
    </tbody>
</table>

CSS

.table {
    table-layout: auto;
}

.table td, .table th {
    white-space: nowrap;
}

.table thead th:last-child {
    width: 100%;
}

Screenshot

https://i.sstatic.net/CN2Jf.png

See Demo: https://jsfiddle.net/davidliang2008/bd7g1mxp/20/

Answer 2

To ensure that the table and its cells adjust to fit the content, set the table-layout to auto. Then, designate the width of the last column as 100% to compress the other columns. To prevent text wrapping in other columns, use white-space: nowrap.

HTML

<table class="table table-striped">
    <thead>
        <tr>
            <th>[header]</th>
            <th>[header 2]</th>
            <th>[header 3]</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>cell here</td>
            <td>longer cell here</td>
            <td>longer longer and even longer cell here</td>
        </tr>
        <tr>
            <td>cell</td>
            <td>longer cell</td>
            <td>longer longer and even longer cell</td>
        </tr>
        <tr>
            <td>cell here here</td>
            <td>longer cell here here</td>
            <td>longer longer and even longer cell here here</td>
        </tr>
    </tbody>
</table>

CSS

.table {
    table-layout: auto;
}

.table td, .table th {
    white-space: nowrap;
}

.table thead th:last-child {
    width: 100%;
}

Screenshot

https://i.sstatic.net/CN2Jf.png

See Demo: https://jsfiddle.net/davidliang2008/bd7g1mxp/20/

Is there a way to customize the alignment in a bootstrap table so that all content is left-aligned and the table utilizes only the required space

Answer №1

HTML

CSS

Screenshot

Similar questions

I'm looking to use JavaScript to dynamically generate multiple tabs based on the selected option in a dropdown menu

Could the reason behind the malfunctioning of the bootstrap tabs be due to my CSS files?

Execute the executable file on the server and display the output on the client side

What is the best way to assign a class to objects with a count greater than a

What are some ways to customize the appearance of Stripe credit card form fields?

What could be causing my absolutely positioned div to be hidden from view?

Is it possible to implement counters in CSS with Jquery?

Active Arrow Link

What are the steps to integrating databases with HTML5?

My PHP script is not functioning correctly with Ajax

Why doesn't the <img> with the class "w-100" fit inside the parent flex div if the <img> is smaller than the parent div in Bootstrap 4?

The width of my root container does not display at a full 100% in mobile dimensions

Angular pop-up message not displaying title or content

``Passing a variable to a Jquery function - A step-by-step guide

The icons within the <i> tag are failing to appear on my Ionic webpage

Creating a slider with a large central image and just three slides that automatically transition

Problem with stacking order in Internet Explorer 7

Looking to incorporate a pre-checked checkbox using Angular Material

I'm attempting to make the button hover color transparent, but unfortunately, it's not having any effect

Oops! An error occurred while trying to load the myApp module. The module 'ui.bootstrap' is missing and causing the failure