如何使用引导程序使可滚动的 html 表格列响应

Question

我不是网页设计师。我试图设计一个带有一些可滚动列的 Web 布局，其中包含一些动态加载的锚标记形式的数据。我设计了一个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>

coulmn 类的 CSS 样式如下所示

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

CSStitles 的类样式如下所示

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

这工作正常，但此设置的问题是它没有响应。我已经在我的应用程序中插入了引导程序。有没有办法使用引导程序使这个设置更具响应性？请帮忙。

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

Answer 2

查看此示例。将引导标题和响应类添加到 div

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Table</h2>
  <p>The .table-responsive class creates a responsive table which will scroll horizontally on small devices (under 768px). When viewing on anything larger than 768px wide, there is no difference:</p>
  <div class="table-responsive">
  <table class="table">
    <thead>
      <tr>
        <th>#</th>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Age</th>
        <th>City</th>
        <th>Country</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Anna</td>
        <td>Pitt</td>
        <td>35</td>
        <td>New York</td>
        <td>USA</td>
      </tr>
    </tbody>
  </table>
  </div>
</div>

</body>
</html>

Answer 3

有一些方法可以通过使用 jQuery 和 css 将 td 更改为 div，但并不容易，您需要为应用程序中的每个表编写不同的 css，以获取更多详细信息see this

如果您不想编写 css，请使用 RAHUL 建议，通过使用引导程序来实现较小屏幕的可滚动表格。