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>

类CSS的{{1}}样式如下所示

coulmn

#column { background-color: #f5f5f5; float: left; width: 14%; height: 125px; overflow: auto; overflow-y: scroll; white-space: nowrap; text-align: center; }类的CSS样式如下所示

titles

这很好用，但这个设置的问题是没有响应。我在我的应用程序中进行了interasted 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

Answer 2

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

如果你不想写css，可以使用bootstrap将RAHUL建议用于小屏幕的可滚动表。

Answer 3

查看此示例。将引导标头和响应类添加到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>

如何使用bootstrap使可滚动的html表列响应

3 个答案: