Menu
I'm using Bootstrap 3 and I wanted to know how I can make an unresponsive table as it needs about 40 columns on screen.
My client doesn't mind if they have to horizontally scroll to view the table as long as all of the data is there.
So how do I make an unresponsive table where I set manually what the column widths are?
968
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 .
The table will be responsive to changes in the table-layout property. You can make your container more responsive by using overflow-x:auto around the table> element in a container element (for example, div).
A responsive table is a table that breaks down to one column while retaining its row/column structure on mobile devices. If you do not need to maintain the row/column structure, then you should probably use a grid.
You can set a min-width on the th columns. Here is an example:
http://jsbin.com/xuzuwuko/3/edit
119
change the container class for "container-fluid"
Example:
<div class="container-fluid">
<table class="table">
...
</table>
</div>
for this work is necessary set doctype in html5:
<!DOCTYPE html>
and add to header this meta:
<meta name="viewport" content="width=device-width, initial-scale=1">
See documentation
38
You can do this in a variety of ways:
1) set min-width in style-sheet to table, th, td, tr:
table {
min-width:700px;
}
tr {
min-width:120px;
}
th,td {
min-width:20px;
}
2) Or, you can remove header responsive meta view:
<meta name="viewport" content="width=device-width, initial-scale=1">
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
