html - 如何使用 Bootstrap 使可滚动的 html 表格列响应

Question

我不是网页设计师。我试图设计一个带有一些可滚动列的网页布局，其中包含一些动态加载的 anchor 标记形式的数据。我设计了一个 html table 结构和一个样式表来实现这一点。该表源码如下所示

<table>
        <tr>
            <!--COLUMN HEADERS -->
            <td id="titles" style="width: 50%">
                <b style="padding-left: 4%">CURRENCY</b>
                <b style="padding-left: 9%">COUNTRY</b> 
                <b style="padding-left: 8%">SECTOR</b> 
                <b style="padding-left: 4%">LOCATION COUNT</b>
            </td>
        </tr>
        <tr>
            <td style="width: 50%">
                <!--1st COLUMN TO HOLD COUNTRY NAMES -->
                <div id="column">
                    <div ng-repeat="currency in allCurrencies">
                        <a href=""
                            ng-click="filterProductByCurrency(currency); filterCountryByCurrency(currency); filterSectorByCurrency(currency)">
                            <span ng-bind="currency"></span> <br>
                        </a> 
                        <input type="hidden" name="currencyHolder" ng-model="selCurrency">
                    </div>
                </div>
                <!--2nd COLUMN TO HOLD CURRENCY NAMES -->
                <div id="column">
                    <div ng-repeat="country in allCountries">
                        <a href=""
                            ng-click="filterProductByCountry(country); filterSectorByCurrAndCtry(country)">
                            <span ng-bind="country"></span> <br>
                        </a> 
                        <input type="hidden" name="countryHolder" ng-model="selCountry">
                    </div>
                </div>
                <!--3rd COLUMN TO HOLD SECTOR NAMES -->
                <div id="column">
                    <div ng-repeat="sector in allSectors">
                        <a href="" ng-click="filterProductBySectors(sector); filterLocBySectors(sector)"> <span
                            ng-bind="sector"></span> <br>
                        </a> 
                        <input type="hidden" name="variantHolder" ng-model="selVariant">
                    </div>
                </div>
                <!--4th COLUMN TO HOLD LOCATION COUNT RANGE -->
                <div id="column">
                    <div ng-repeat="locCount in locationRangeValues">
                        <a href="" ng-click="filterProductByRange(locCount)"> 
                        <span ng-bind="locCount"></span> <br>
                        </a>
                    </div>
                </div>
            </td>
        </tr>
</table>

类 couln 的 CSS 样式如下所示

#column {
    background-color: #f5f5f5;
    float: left;
    width: 14%;
    height: 125px;
    overflow: auto;
    overflow-y: scroll;
    white-space: nowrap;
    text-align: center;
}

CSS 类的 titles 样式如下所示

#titles{
    background-color: #f5f5f5;
    color: #069; 
    fill: #069;
}

这工作正常，但此设置的问题是它没有响应。我在我的应用程序中交互了 Bootstrap 。有什么方法可以使用 Bootstrap 使此设置更具响应性吗？请帮忙。

Answer 1

要使任何表格具有响应性，只需将表格放在 <div> 中即可。元素并应用类 .table-responsive在上面，如下例所示:

<div class="table-responsive"> 
    <table class="table table-bordered">
        <thead>
            <tr>
                <th>Row</th>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Email</th>
                <th>Biography</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>John</td>
                <td>Carter</td>
                <td>johncarter@mail.com</td>
                <td>Lorem ipsum dolor sit amet…</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Peter</td>
                <td>Parker</td>
                <td>peterparker@mail.com</td>
                <td>Vestibulum consectetur scelerisque…</td>
            </tr>
            <tr>
                <td>3</td>
                <td>John</td>
                <td>Rambo</td>
                <td>johnrambo@mail.com</td>
                <td>Integer pulvinar leo id risus…</td>
            </tr>
        </tbody>
    </table>
</div>

查看工作前 here