如何使 table 响应 bootstrap

Question

需要帮助才能使 table 响应。

在这个尺寸上一切正常：

但是当屏幕尺寸缩小时，我会得到这样的消息：

table 显示在 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>

已编辑： 如果我尝试添加最大和最小宽度，标记的位置会减少太多：

Answer 1

如果您想避免减小字体大小、table 单元格宽度等的麻烦。我建议使用 Bootstrap 响应式 table 实用程序，基本上使 table 水平滚动。可以这样实现...

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

Answer 2

我看过你的第二个 example。

麻烦的部分显然是你的标题栏，它的元素在 class ritekhela-fancy-title-two

并且您在这个 class 周围有一个包装 div，名为 row，这个 div 需要设置以使其宽度适应嵌套内容。

由于 fit-content 是实验性的并且 not available at all browsers，您需要将宽度设置为自动并使其表现为内联块

那么你必须将ritekhela-fancy-title-twoclass的宽度设置为auto并移除float:left，或者将其设置为float:none，它将在大屏幕上既不会溢出，也不会在小屏幕上扩展到 table 的宽度。

就是这样，检查 fiddle 是否实施了上述更改

这是两个 css 样式，它们是 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;
}

编辑： 如上更改也会影响下方的标题栏，这很容易更正，为第二行增加一些高度：

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

也从这个 css 中删除 .ec-nextmatch，现在看起来是：

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

如何使 table 响应 bootstrap

how to make responsive table with bootstrap

css

css-tables

bootstrap-4

responsive