Make horizontally scrollable table in bootstrap using Grid system
Question
I've seen questions like this but none of them worked for me. So here is my Code:
<div class="table-responsive">
<table class="table col-xs-12 col-md-12 col-lg-12 col-sm-12">
<tr>
{partners_info}
<td>
<a href="{link_partner}">
<div style=" background-image: url('{img_partner}');" class="give_size">
</div>
</a>
</td>
{/partners_info}
</tr>
</table>
<style>
.give_size {
background-repeat: no-repeat;
background-size: 200px auto;
background-position: center;
height: 200px;
}
</style>
Basiccly I'm using codeigniter and bootstrap and Here os my website where you can clearly see the problem you can scroll down and see the it. I want to make this table scrollable horizontally but pictures to take exact width as provided in code.Hope you can help and thank you very much.
1 answers
solution1
0 2015-05-03 12:15:07
Check my example to make , anything scrollable we need to give it a height and use overflow-x or overflow-y and than we need to add what we want when the overflow happens in your case you wanted to make it scroll able therefore the code looks like overflow-y:scroll;
tr { width: 100%; display: inline-table; } table{ height:300px; } tbody{ overflow-y: scroll; height: 200px; width: 100%; position: absolute; }
<head> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> </head> <table class="table table-striped"> <thead><tr><th>Col 1</th><th>Col 2</th><th>Col 3</th></tr></thead> <tbody> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> </tbody> </table>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Bootstrap - Make cards horizontally scrollable
trying to organize bootstrap cards using grid system horizontally
How to change a transposed table to make it horizontally scrollable?
How to make a table horizontally scrollable and the tbody vertically scrollable
Bootstrap grid system with table
Table in Bootstrap Grid System
How to make scrollable html table columns responsive using bootstrap
How to make the grid system centered horizontally?
Grid system using Bootstrap 3
How to make this grid system on Bootstrap 3?
Related Tags