Question

该表包含大量列，这样当浏览器恢复时，最后一列对用户是不可见的。我想在表格的底部添加一个水平滚动条，以便用户可以拖动它并查看最后一列。

<div class="col-md-12 well">
  <div id="double-scroll">
    <table id="dataGrid" class="dataGrid display dataTable" cellspacing="0" width="100%">
      <thead>
        <tr>
          <th style="display:none;">&nbsp;</th>
          <th>{{ Lang::get('messages.Event_Name') }} </th>
          <th>{{ Lang::get('messages.organization_name') }}</th>
          <th>{{ Lang::get('messages.Event_Start_Date') }} </th>
          <th>{{ Lang::get('messages.Event_End_Date') }} </th>
          <th>{{ Lang::get('messages.Event_Start_Time') }} </th>
          <th>{{ Lang::get('messages.Event_End_Time') }} </th>
          <th>{{ Lang::get('messages.Event_Location') }} </th>
          <th>{{ Lang::get('messages.Event_Venue') }} </th>
          <th>{{ Lang::get('messages.Event_Url') }} </th>
          <th>{{ Lang::get('messages.Created_Date') }} </th>
          <th>&nbsp;</th>
          <th>&nbsp;</th>
          <th>&nbsp;</th>
        </tr>
      </thead>

      <tfoot>
        <tr>
          <th style="display:none;">&nbsp;</th>
          <th>{{ Lang::get('messages.Event_Name') }} </th>
          <th>{{ Lang::get('messages.organization_name') }}</th>
          <th>{{ Lang::get('messages.Event_Start_Date') }} </th>
          <th>{{ Lang::get('messages.Event_End_Date') }} </th>
          <th>{{ Lang::get('messages.Event_Start_Time') }} </th>
          <th>{{ Lang::get('messages.Event_End_Time') }} </th>
          <th>{{ Lang::get('messages.Event_Location') }} </th>
          <th>{{ Lang::get('messages.Event_Venue') }} </th>
          <th>{{ Lang::get('messages.Event_Url') }} </th>
          <th>{{ Lang::get('messages.Created_Date') }} </th>
          <th>&nbsp;</th>
          <th>&nbsp;</th>
          <th>&nbsp;</th>
        </tr>
      </tfoot>

      <tbody id="mailTableBody">
        @foreach ($liveEvents as $value)
        <tr role="row" class="odd">
          <td style="display:none;" class="sorting_1">{{ $value->id }}</td>
          <td>{{ $value->eventName }}</td>
          <td>{{ $value->organizationName }}</td>
          <td>{{ $value->startDate }}</td>
          <td>{{ $value->endDate }}</td>
          <td>{{ $value->startTime }}</td>
          <td>{{ $value->endTime }}</td>
          <td>{{ $value->location }}</td>
          <td>{{ $value->Venue }}</td>
          <td><a class="btn btn-danger" style ="height: 32px;" href="{{ $value->publicURL }}" >{{Lang::get('messages.register')}}</a></td>
          <td>{{ $value->created_at }}</td>

          <td><button onclick="watchnow(this)" class="btn btn-success" style ="width: 150px; float: right" >{{Lang::get('messages.watchnow')}}</button></td>
        </tr>
        @endforeach
      </tbody>
    </table>
  </div>
</div>

Answer 1

你在下面添加css代码：

<style type="text/css">
    #double-scroll {
        overflow:scroll
    }
</style>

请在<head>

内进行编码

注意：如果你想支持旧的浏览器，请在最新版本的浏览器上支持overflow-x和overflow-y，即你需要使用overflow：scroll

Answer 2

添加此样式：

#datagrid{
  overflow-x: scroll;
}

Answer 3

找到最佳答案..

<style type="text/css">
    #double-scroll { overflow: auto; overflow-y: hidden; }
    #double-scroll p { margin: 0; padding: 1em; white-space: nowrap; }
</style>

如何在此表底部添加水平滚动条？

3 个答案: