Creating a responsive table using Bootstrap is easy and efficient

Question

Creating a responsive table using Bootstrap is easy and efficient

Looking for assistance in making a responsive table. Everything looks fine at full size: https://i.sstatic.net/xKSLi.png

but when the screen size is reduced I end up with something like this: https://i.sstatic.net/x0kwc.png

The table is displayed on col-md-7:

<div class="row">
                    <div class="col-md-7">
                        <div class="ritekhela-fancy-title-two">
                            <h2>Turnyrinė lentelė</h2>
                        </div>

                        <div class="rs-point-table sec-spacer">
                            <div class="tab-content">
                                <table>
                                    <tr>
                                        <td>Vieta</td>
                                        <td class="team-name">Komanda</td>
                                        <td>Sužaista</td>
                                        <td>Perg.</td>
                                        <td>Lyg.</td>
                                        <td>Laim.</td>
                                        <td>Įm.</td>
                                        <td>Pr.</td>
                                        <td>+/-</td>
                                        <td>Taškai</td>
                                    </tr>
                                    <tr>
                                        <td>01</td>
                                        <td class="team-name">Banani FC</td>
                                        <td>60</td>
                                        <td>35</td>
                                        <td>08</td>
                                        <td>16</td>
                                        <td>02</td>
                                        <td>04</td>
                                        <td>11</td>
                                        <td>95</td>
                                    </tr>
                                   </table>
                            </div>
                        </div>
                    </div>

UPDATE: When attempting to set max and min width, the designated area shrinks too much: https://i.sstatic.net/k6m7F.png

css bootstrap-4 responsive css-tables

Answer 1

Answer №1

Upon reviewing your second example, it appears that the issue lies within your title bar, specifically in the elements enclosed by the class ritekhela-fancy-title-two.

You have a surrounding div with the name row wrapping this class, which should be adjusted to accommodate the width of its nested content.

Given that the 'fit-content' property is not universally supported by all browsers (as mentioned here), you will need to set the width to 'auto' and treat it as an inline block instead.

Subsequently, the width of your ritekhela-fancy-title-two class should be set to 'auto', eliminating the float:left declaration or changing it to 'float:none'. This adjustment ensures that the container does not overflow on larger screens and expands appropriately based on the table width on smaller screens.

To see these modifications in action, please refer to the updated version on the fiddle provided.

The key CSS styles that were edited/added are as follows:

.row {
    width: auto;
    display: inline-block;
}

.ritekhela-fancy-title-two {
    float: none;
    width: auto;
    padding: 12px 20px 12px 60px;
    border-top: 7px solid;
    background: url(/css/images/transparent-pattren.png);
    position: relative;
    margin-top: 30px;
    background-color: #6c757d;
}

edit: Additionally, to correct the impact on other title bars below, adjust the height of the second row:

.ec-nextmatch {
    border: 1px solid #f3f3f3;
    border-top: none;
    background-color: #fff;
    margin-bottom: 60px;
    float: none;
    height: 90px;
    width: auto;
}

Furthermore, remove .ec-nextmatch from the CSS snippet below for the following result:

.ec-team-matches, .ec-match-countdown, .ec-match-countdown .countdown-row, .ec-ticket-button {
    float: left;
    width: 100%;
}

Answer 2

Upon reviewing your second example, it appears that the issue lies within your title bar, specifically in the elements enclosed by the class ritekhela-fancy-title-two.

You have a surrounding div with the name row wrapping this class, which should be adjusted to accommodate the width of its nested content.

Given that the 'fit-content' property is not universally supported by all browsers (as mentioned here), you will need to set the width to 'auto' and treat it as an inline block instead.

Subsequently, the width of your ritekhela-fancy-title-two class should be set to 'auto', eliminating the float:left declaration or changing it to 'float:none'. This adjustment ensures that the container does not overflow on larger screens and expands appropriately based on the table width on smaller screens.

To see these modifications in action, please refer to the updated version on the fiddle provided.

The key CSS styles that were edited/added are as follows:

.row {
    width: auto;
    display: inline-block;
}

.ritekhela-fancy-title-two {
    float: none;
    width: auto;
    padding: 12px 20px 12px 60px;
    border-top: 7px solid;
    background: url(/css/images/transparent-pattren.png);
    position: relative;
    margin-top: 30px;
    background-color: #6c757d;
}

edit: Additionally, to correct the impact on other title bars below, adjust the height of the second row:

.ec-nextmatch {
    border: 1px solid #f3f3f3;
    border-top: none;
    background-color: #fff;
    margin-bottom: 60px;
    float: none;
    height: 90px;
    width: auto;
}

Furthermore, remove .ec-nextmatch from the CSS snippet below for the following result:

.ec-team-matches, .ec-match-countdown, .ec-match-countdown .countdown-row, .ec-ticket-button {
    float: left;
    width: 100%;
}

Answer 3

Answer №2

To simplify the process of adjusting font sizes and table cell widths, I suggest utilizing the Bootstrap responsive table utility. This feature enables the table to scroll horizontally without much effort. Here's how you can implement it:

...
<div class="tab-content table-responsive">
    <table class="table">
        ...
    </table>
</div>
...

Answer 4

To simplify the process of adjusting font sizes and table cell widths, I suggest utilizing the Bootstrap responsive table utility. This feature enables the table to scroll horizontally without much effort. Here's how you can implement it:

...
<div class="tab-content table-responsive">
    <table class="table">
        ...
    </table>
</div>
...

Creating a responsive table using Bootstrap is easy and efficient

Answer №1

Answer №2

Similar questions

The Bootstrap class "text-right or text-end" does not seem to be functioning properly when applied to the <a> element

Adding a timestamp to the src URL in HTML: A step-by-step guide

Placing markers on a straight path

How can I keep the CSS3 animation playing even after the hover state ends?

Generate text in reStructuredText with columns

I attempted all possible solutions, but unfortunately could not achieve success. I encountered difficulty in adding the data-offset and even attempted implementing jQuery to no avail

Can responsive images be utilized with a DIV's background-image property?

Seeking assistance with images for a website

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

Personalized AWS Cognito: Strategies for Tailoring Input Field Designs

Font rendering problems in browsers, issue with anti-aliasing

Struggling to Locate the Chat Element on Google Hangouts Using Selenium Python

What is causing the section to cover the navbar?

Tips for configuring the navigation links on the current page using Bootstrap

Display an image with a colored background using CSS

The initial display of jqGrid columnChooser may not show the expected effect on the first attempt

Minimum number of cards in each column

Border color options for select boxes

Unable to access the jumbotron in Angular with Bootstrap 5

Tips for defining CSS class for tables using django_tables2