how to make responsive table with bootstrap

Question

need help to make table responsive.

On this size everything is ok:

but when screen size is reduced im getting smth like this:

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>

EDITED: If i trying to add max and min width, marked place is reducing too much:

Answer 1

I've had a look into your second example.

the troubling part is obviously your title bar, whose elements are inside the class ritekhela-fancy-title-two

And you have a wrapping div around this class, named row, this div needs to get set to adapt its width to the nested content.

Since fit-content is experimental and not available at all browsers, you'll need set width to auto and make it behave as an inline block

Then you must set the width of your ritekhela-fancy-title-two class to auto and remove the float:left, or set it to float:none and it will neither overflow on larger screens or not expand to the width of table on smaller screens.

that's it, check the fiddle with above changes implemented

these are the two css styles which were changed/added:

.row {
    width: fit-content; /*works with Chrome, but not with FF*/
    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: as above changes also affect the lower title bars, which is easy to correct, adding some height to the second row:

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

also remove .ec-nextmatch from this css, so it looks now:

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

Answer 2

If you want to avoid the hassle of reducing font sizes, table cells widths, etc. I would recommend using the Bootstrap responsive table utility, basically makes the table scroll horizontally. Can be achieved like so...

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