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
Related
I have a grid layout with some navigation pills in the left column set to "col-auto" because I want these to only take up the space of the content's natural width.
In the second table I want to have a large table with horizontal scrollbar. I'm able to achieve this except the table always jumps below the navigation bar and I can't get it to be rendered to the right.
See in the attached fiddle: https://jsfiddle.net/3vxhd6jf/3/
<div class="container">
<div class="row">
<div class="col-auto"> <!-- Should only take up the necessary space -->
<!-- Nav tabs -->
<div class="d-flex align-items-start">
.....
</div>
</div>
<div class="col"> <!-- Should take up the rest of the space -->
<div class="tab-content">
<div class="tab-pane active" id="tab-data" role="tabpanel" aria-labelledby="nav-data">
<div id="div-data-container" class="mb-3 table-responsive">
<!-- The table -->
<table class="table table-sm table-striped">
.....
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
What I would like to achieve is to render the table to the right of the navigation pills, just like the textarea is rendered when you click the 'JSON' pill.
Can you please help?
Rows in Bootstrap are flex containers that allow wrapping by default. If you want to force your columns onto the same line, you need to prevent that wrapping.
Apply the flex-nowrap class to your row:
<div class="row flex-nowrap">
With everything on one row, you'll find the size of the table causes it to overflow. You're already utilising Bootstrap's table-responsive class. Put overflow-hidden on the column containing the table to keep the content within the row.
<div class="col overflow-hidden"> <!-- tab content / table markup / etc -->
Further reading: https://getbootstrap.com/docs/5.0/utilities/flex/#wrap
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 am pretty new to bootstrap and have been beating my head up with the following problem. Whenever I use the following code, the padding between the columns is getting lost.
<body>
<div class="container-fluid">
<div class="row">
<div class="col-sm-4 col"></div>
<div class="col-sm-4 col"></div>
<div class="col-sm-4 col"></div>
</div>
</div>
</body><!--end body-->
But whenever I move the class col inside the column, then the code works exactly as expected.
<body>
<div class="container-fluid">
<div class="row">
<div class="col-sm-4">
<div class="col"></div>
</div>
<div class="col-sm-4">
<div class="col"></div>
</div>
<div class="col-sm-4">
<div class="col"></div>
</div>
</div>
</div>
</body><!--end body-->
Following is the CSS class that I am using
<style>
.col{
min-height: 500px;
background-color: gray;
}
</style>
Bootstrap does not add space between the columns, it adds space inside each column. So if you put another div inside each column that will give the space you want.
The way I look at it is the columns only act as containers for the actual content, which goes inside them.
jsfiddle of the kind of thing I think you should do instead: https://jsfiddle.net/bqadptzL/
CSS:
.col {
/* just to demonstrate */
background-color: red;
}
.box {
background-color:gray;
min-height: 500px;
}
HTML:
<body>
<div class="container-fluid">
<div class="row">
<div class="col-sm-4 col">
<div class="box">
Content
</div>
</div>
<div class="col-sm-4 col">
<div class="box">
Content
</div>
</div>
<div class="col-sm-4 col">
<div class="box">
Content
</div>
</div>
</div>
</div>
</body><!--end body-->
If you look at the grid system examples, you will see there is no space between the columns, only inside them. http://getbootstrap.com/css/#grid
Hope that helps.
Sidenote: you should not put columns inside columns, you should only put columns inside rows. But you can put rows inside columns. So you can alternate row - column - row - column, not row - column - column. This is how Bootstrap system is meant to work.
When you use the second version you get a margin created by the div you added,
if you add a margin to the .col css class you should see the difference.
You can take a look here for a more detailed answer about how to work with the columns in bootstrap with a similar issue
The padding is not getting lost. In Bootstrap, col-sm-* has 15px padding. Remember, the background color fills entire the width of the cell, padding included.
You're putting the bg color on the column with padding, and in the other case it's on the inner column that doesn't have padding.
Put the background-color and a border, only on the col-sm-4. and you'll see the difference. The padding is there, and the same in both cases...
http://www.codeply.com/go/lf2V9vlIsr
I have a page which breaks down as follows:
<div class="container-fluid" style="min-width:768px">
<div id="main-sidebar"></div>
<div id="main-frame"></div>
<div id="supplementary-sidebar"></div>
<div id="content-container"></div>
<!-- ALL THE INTERESTING CODE GOES HERE -->
<div id="content" class="row"></div>
</div>
</div>
<footer></footer>
</div>
The widths of all the elements in container fill the screen width.
The main-sidebar's width is set to auto.
The main-frame is set to min-width of 72.65%.
The supplementary-sidebar is at 20% of the parent main-frame.
The content-container is at 80% of the parent main-frame.
Basically I want the main-sidebar to be as big as it need to be,
and then have the main-frame fill up the rest of the parent page.
I succeeded at this by accident and have pinpointed the Twitter Bootstrap class that gets the job done. The screen will not fill if I remove it. This is:
<div class="btn-group-justified" style=""></div>
I have tried many different lines of code (included below), which were attempts at doing this consciously. But at this point I can't really go much further.
Does anybody know why this forces the main-frame to fill up the screen?
Here are my attempts:
<!---
NOTHING HERE WORKS
<div style="width:100%"> </div>
<div style="display:table;width: 100%;table-layout: fixed;border-collapse:seperate;display: block;"></div>
<div style="display:table;width: 100%;table-layout: fixed;border-collapse:seperate;display: block;"> </div>
<div id="spreader" class="row" style="">
<div class="col-sm-12">
</div>
</div>
<div id="spreader"></div>
#spreader{
display:table;
width: 100%;
table-layout: fixed;
border-collapse:seperate;
display: block;
}
-->
<!--- THIS IS HOW I ORGINALLY GOT IT TO WORK
<div class="row" style="">
<div class="col-sm-12">
<div class="btn-group btn-group-justified" style="">
</div>
</div>
</div>
-->
Here is the the screenshot showing the relevant bootstrap code. For some reason, this still works when I take border-collapse out. But if I include just this in a class like I did with #spreader above (and even if I include border-collapse) it will still not work.
<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?