该表包含大量列,因此当浏览器恢复时,最后的列对用户是不可见的。我想在表格底部添加一个水平滚动条,以便用户可以拖动它并查看最后一列。
<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;"> </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> </th>
<th> </th>
<th> </th>
</tr>
</thead>
<tfoot>
<tr>
<th style="display:none;"> </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> </th>
<th> </th>
<th> </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>
最佳答案
找到最佳答案..
<style type="text/css">
#double-scroll { overflow: auto; overflow-y: hidden; }
#double-scroll p { margin: 0; padding: 1em; white-space: nowrap; }
</style>
关于html - 如何在此表的底部添加水平滚动条?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30701000/