I'm writing a web site using bootstrap (3.3.2) with a simple table on one of the pages. I just have a simple header panel in one container, and another content container with a title and table. For some reason, text fills the width of the container, but the table left aligns and only spans the width required by the text within. Anyone have any ideas? I know I can add in a width="100%" to the table, but this should be default bootstrap behaviour...
Cheers
<html>
<head>
<title>Page title</title>
<link type="text/css" rel="stylesheet" href="bootstrap.min.css">
</head>
<body>
<div class="navbar navbar-inverse navbar-static-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="index.html">Home</a>
</div>
<div id="navbar" class="navbar-collapse collapse" >
<ul class="nav navbar-nav">
<li><a class="navbar-brand" href="modules.html">Modules</a></li>
<li><a class="navbar-brand" href="sites.html">Sites</a></li>
<li><a class="navbar-brand" href="search.html">Search</a></li>
</ul>
</div>
</div>
</div>
<div class="container">
<div class="page-header">
<h2>Why won't the table align!?</h2>
</div>
<div class="table-responsive">
<table>
<thead>
<th>Head1</th><th>Head2</th><th>Head3</th>
</thead>
<tbody>
<tr>
<td>Body1</td><td>Body2</td><td>Body3</td>
</tr>
<tr>
<td>Body1</td><td>Body2</td><td>Body3</td>
</tr>
<tr>
<td>Body1</td><td>Body2</td><td>Body3</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
It's because you are not following the Bootstrap documentation indications on responsive tables. You have to wrap your table element with .table class in a wrapper <div> with the .table-responsive class, like this:
<div class="table-responsive">
<table class="table">
...
</table>
</div>
NOTE: If you're using bootstrap v4 alpha, even though the documentation says that you can use:
<table class="table table-responsive">
...
</table>
I still had to use the accepted answer to make it fill the container's width:
<div class="table-responsive">
<table class="table">
...
</table>
</div>
The accepted answer is incorrect. Per the docs
Create responsive tables by wrapping any .table in .table-responsive to make them scroll horizontally on small devices (under 768px). When viewing on anything larger than 768px wide, you will not see any difference in these tables.
Then goes on to show proper usage
<div class="table-responsive">
<table class="table">
...
</table>
</div>
You should also have the .table class on the <table>
http://getbootstrap.com/css/#tables-responsive
This solution worked for me:
just add another class into your table element: w-100 d-block d-md-table
so it would be : <table class="table table-responsive w-100 d-block d-md-table">
for bootstrap 4 w-100 set the width to 100% d-block (display: block) and d-md-table (display: table on min-width: 576px)
<div class="table table-responsive w-100 d-block d-md-table">
<table class="table">
---
</table>
</div>
Try to add bootstraps class "table" to the tag.
<table class="table">
<thead>
<th>Head1</th><th>Head2</th><th>Head3</th>
</thead>
<tbody>
<tr>
<td>Body1</td><td>Body2</td><td>Body3</td>
</tr>
<tr>
<td>Body1</td><td>Body2</td><td>Body3</td>
</tr>
<tr>
<td>Body1</td><td>Body2</td><td>Body3</td>
</tr>
</tbody>
</table>
Even responsive tables do not expand to fit the container if the container is large. There is no Boostrap table configuration to make that happen.
The simplest way, if you want to use Bootstrap classes, is to add w-100.
Otherwise, use a single-column grid layout.
Instead of using:
<div class="table-responsive">
you should use:
<table class="table table-responsive">
JSFiddle
In most simple words !!
Create responsive tables by wrapping any .table in .table-responsive
to make them scroll horizontally on small devices (under 768px). When
viewing on anything larger than 768px wide, you will not see any
difference in these tables.
So for your requirement .table and .table-responsive will help you.
Related
I have a ionic app that im building one of the pages with bootstrap, i have very little experience with html and css, tryng to learn it now. My main page created via ionic CLI has page scroll, but this one that im making with bootstrap wont work this is the page html:
<body>
<div id=#myWorkContent>
<div class="container-fluid">
<div class="row">
<div class="col-xs-6 col-lg-12">
<table class="table table-striped table-bordered table hover">
<thead>
<tr>
<th>Nervo</th>
<th>Latência(ms)</th>
<th>Amplitude Dista(mV)</th>
<th>Amplitude Prox. (mV)</th>
<th>Velocidade(m/s)</th>
<th>Onda F(ms)</th>
</tr>
</thead>
<tbody>
<!-- long sequence of <tr><td>td><td></tr> inside -->
</tbody>
</table>
</div>
</div>
</div>
</div>
</body
ive tried this css >
#myWorkContent{
width: 100%;
height:100%;
overflow-x: scroll;
overflow-y: scroll;
}
use height:100vh and overflow:auto overflow auto when the page dosen't need scroll, will not appear.
#myWorkContent{
width: 100%;
height:100vh;
overflow:auto;
}
I'm having a hard time centering a table I've put inside a panel of an accordion slider on my website. The page I'm talking about is this:
http://www.smartcuts.ch/index-TEST.html#latest
My html is
<div class="container">
<div class="row">
<div class="col-xs-11">
<div class="table-responsive">
<table summary="This table shows our rates" class="table table-condensed table-striped">
Can I center the table within the panel using some command in this html or must I use CSS? If so, please enlighten me. I've tried all kinds of stuff but nothing seems to work.
Thanks a lot.
You have to:
remove the containerclass or eventually use .container-fluid
use col-xs-12 instead of col-xs-11.
Here is the working code:
<div><!-- removed class .container -->
<div class="row">
<div class="col-xs-12">
<div class="table-responsive">
<table summary="This table shows our rates" class="table table-condensed table-striped">
<!-- Table content here-->
</table>
</div><!--end of .table-responsive-->
</div>
</div>
</div>
FINAL RESULT:
You don't have to kill the container class, you can update it to .container-fluid. And you don't need to change .col-xs-11 to .col-xs-12.
You can add an ID to the .col-xs-11 div and override two styles to center the div instead of the table itself. I am assuming that you picked .col-xs-11 because you wanted that specific width, and since the table is responsive it's inheriting the width of the containing div.
HTML:
<div class="container-fluid">
<div class="row">
<div id="center-table" class="col-xs-11">
<div class="table-responsive">
CSS:
#center-table{
float: none;
margin: 0 auto;
}
Working JS fiddle example:
https://jsfiddle.net/joeydehnert/oczyocwp
I have the following code in HTML, using bootstrap:
<div class="panel-body">
<form class="form-horizontal" role="form">
<div class="container-fluid form-group" ng-repeat="app in allKeys track by $index">
<label for="inputEmail2" class="col-md-4 control-label">{{app}}</label>
<div class="col-sm-6 table-responsive">
<table class="table">
<tr>
<td ng-repeat="app1 in allDesc[$index]"><b> {{app1}}</b> </td>
</tr>
<tr >
<td ng-repeat="app2 in allValues[$index]"> {{app2}} </td>
</tr>
</table>
</div>
</form>
</div>
I have two main problem:
If the text is too long in the label section ({{app}}), the text is continue in the line, and override the text in the table section.
If I minimize the browser windows, the container doesn't get the correct size.
I think that this issues are result of definition in the css, that should adjust the text to the appropriate size of the window/column, but I didn't find any css definition for that.
As mentioned in the comments, your main problem is just a missing closing <div> tag. You haven't closed the container-fluid. You can see it working in this Bootply
I also changed your col-md-4 to col-sm-4, as your table wrapper was using sm definitions, which meant that your label would have broken to full width at 'medium' size and your table would have broken to full width at 'small' size, which caused some layout inconsistencies.
you can try this code :
<div class="panel-body">
<form class="form-horizontal" role="form">
<div class="container-fluid form-group row" ng-repeat="app in allKeys track by $index">
<div class="col-sm-6">
<label for="inputEmail2" class="col-md-4 control-label">{{app}} </label></div>
<div class="col-sm-6 table-responsive">
<table class="table">
<tr>
<td ng-repeat="app1 in allDesc[$index]"><b> {{app1}}</b> </td>
</tr>
<tr >
<td ng-repeat="app2 in allValues[$index]"> {{app2}} </td>
</tr>
</table>
</div>
</form>
</div>
making the width to 100% and splitting the blocks accordingly, will help the browser to display the content in a proper way and remember to close the "div" whenever the content for the div is over. Else, the following content will go with misplacement.
<div class="col-xs-6 col-sm-4">
<div class="panel panel-primary">
<div class="panel-heading">Recently Filtered</div>
<table class="table table-striped">
<tr><td>Sensor ID</td><td>Temperature</td><td>Voltage</td><td>Date</td>
<tr><td>Sensor ID</td><td>Temperature</td><td>Voltage</td><td>Date</td>
<tr><td>Sensor ID</td><td>Temperature</td><td>Voltage</td><td>Date</td>
<tr><td>Sensor ID</td><td>Temperature</td><td>Voltage</td><td>Date</td>
</table>
</div>
</div>
The table inside a panel is overflowing when I zoom in, here's a picture example
What's the proper mark up accommodating this problem? I know that it can scale properly for sure.
You could always add .table-responsive class to the table to get it scroll horizontally. Example:
<div class="table-responsive">
<table class="table table-striped">
...
</table>
</div>
If that isn't what you're wanting, you'll need to lower the font size to make it fit better.
it appears to only happen when the viewport has responded down to mobile sizes. The easiest fix is to add overflow rule.
.panel {
overflow: auto;
}
you could also change font sizes or remove unneeded table cells. You could also abbreviate
ID
Temp
V
Date
Just an idea, you tryed to add a div with class panel-body around the table?
In the following code, the tool tip appears when we move our cursor to the link, tool tip is an image, the length of image can be very long. The problem is whenever length of image is long, scroll bar appears on the right side and then alignment gets disturbed. all the contents moves to left a little bit. How can I avoid that, Any help id highly appreciated. Thanks
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="brand" href="#">Summarization Search Engine</a>
</div>
</div>
</div>
<div class="container">
<table>
<tr>
<td><p>You Searched for <b><i>../html/Sample Results.html</b></i></p></td>
</tr>
</table>
<table class="table table-hover">
<tbody>
<tr>
<td><a class="brand" id="0" rel="popover" href="http://en.wikipedia.org/wiki/Information_technology_management">It Infrastructure</a><br><p>These resources may include tangible investments like computer hardware, software, data, networks and data centre facilities, as well as the staff who are hired to maintain them.</p></td>
</tr>
</tbody>
</table>
</div>
</body>