如何使用引導程序制作響應式表格

Question

需要幫助以使表格響應。

在這個尺寸上一切正常：

但是當屏幕尺寸減小時，我會像這樣：

表格顯示在 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

我看過你的第二個例子。

麻煩的部分顯然是你的標題欄，它的元素在 class ritekhela-fancy-title-two

你有一個圍繞這個 class 的包裝 div，名為row ，這個 div 需要設置以使其寬度適應嵌套內容。

由於 fit-content 是實驗性的， 並非在所有瀏覽器中都可用，因此您需要將 width 設置為 auto 並使其表現為內聯塊

然后，您必須將ritekhela-fancy-title-two class 的寬度設置為auto並刪除浮動：左，或將其設置為float:none ，它既不會在較大的屏幕上溢出，也不會在較小的屏幕上擴展到表格的寬度屏幕。

就是這樣，檢查實現上述更改的小提琴

這些是更改/添加的兩個 css styles：

.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%;
}

Answer 2

如果你想避免減少字體大小、表格單元格寬度等的麻煩。我建議使用 Bootstrap 響應式表格實用程序，基本上使表格水平滾動。 可以這樣實現...

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