Menu
I have a table to represent some data in my html page. I'm trying to make this table as responsive. How can I do this?
Here is the Demo.
804
You can just wrap your <table> tag inside of <div class="table-responsive"></div> since you're using bootstrap. Just like this: (use <table> instead of grid system (e.g. col-xs-1 etc.)) .. That's it!
The primary method of making a responsive table is to add a class table table-responsive inside the table tag. To make a table responsive, we wrap the whole table inside a container tag like div with property overflow-x equals to auto .
To prevent cells (rows) from expanding vertically, you have to set a fixed height for table rows. Select the relevant rows and, on the Table Tools Layout tab, click Properties. On the Row tab, select "Specify height" and then choose "Exactly" for "Row height is." Specify the desired amount.
A responsive table is simply a 100% width table.
You can just set up your table with this CSS:
.table { width: 100%; } Demo here
You can use media queries to show/hide/manipulate columns according to the screens dimensions by adding a class (or targeting using nth-child, etc):
@media screen and (max-width: 320px) { .hide { display: none; } } HTML
<td class="hide">Not important</td> If you have a table with a lot of data and you would like to make it readable on small screen devices there are many other solutions:
99
Check the below links for responsive table:
http://css-tricks.com/responsive-data-tables/
http://zurb.com/playground/responsive-tables
http://zurb.com/playground/projects/responsive-tables/index.html
23
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
