I have a responsive bootstrap table and I want to display the scrollbar even when you do not need to scroll. However, there is a big space between the bottom of the table and the scrollbar.See jsfiddle: https://jsfiddle.net/er1187/dmgx7db6/
I tried adding no margin/padding to the table but this is not work. Thanks in advance!
.table-responsive{
overflow-x:scroll;
margin: 0 !important;
padding-bottom: 0 !important;
}
Try to reorder your code. Try this
<div class="box-content box-no-padding">
<div class="table-responsive">
<table class="table table-bordered">
<thead>
<tr>
<th class="text-center">First Name</th>
<th class="text-center">Last Name</th>
<th class="text-center">ID</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Smith</td>
<td>1187</td>
</tr>
</tbody>
</table>
<div class="scrollable-area">
</div>
</div>
</div>
Related
Would it be possible to use table-responsive that only use the minimal column width based on the length of the data in the column, and also having the thead using all the canvas width.
Example: (the last column that has no content would use the remaining space on the right)
If you add a table-responsive class to your table, it will occupy 100% of it's parent's width and will space the columns equally... this is shown in the top table in the code snippet below
But we can do what you're looking for:
want all the columns to use minimal width
last empty column to occupy the remaining width.
check the bottom table in the code snippet below
th {
background: lightgray
}
.myTableOne td {
white-space: nowrap
}
.myTableOne th:last-of-type {
width: 100%;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<div class="container-fluid">
<h4>Table with table-responsive class</h4> <br/>
<div class="table-responsive">
<table class="table table-bordered">
<thead>
<tr>
<th>#</th>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
<th>City</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Anna</td>
<td>Pitt</td>
<td>35</td>
<td>New York</td>
<td></td>
</tr>
</tbody>
</table>
</div>
</div>
<hr/>
<h4>Table for your requirements </h4>
<br/>
<div class="myTableOne">
<table class=" table-bordered">
<thead>
<tr>
<th>#</th>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
<th>City</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Anna</td>
<td>Pitt</td>
<td>35</td>
<td>New York</td>
<td></td>
</tr>
</tbody>
</table>
</div>
I have a Bootstrap 4 table that shows monetary value information, but I have a display problem in the responsive mode, then I detail my problem:
I have the following Html code:
<div class="table-responsive">
<table class="table table-hover">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>$ 1,543,3345,432</td>
<td>$ 1,456,334,4545</td>
<td>$ 1,000,0202</td>
</tr>
</tbody>
</table>
</div>
On the PC it is displayed perfectly:
But in response mode the problem appears:
What I want is that in the responsive mode, it looks like the pc. I have tried several ways to change the css to get this, but I could not.
Thank you very much!
You can give width to table and make it inline and another way is applying to white-space: nowrap; of table tr td
.tablewd{
min-width:450px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<div class="table-responsive">
<table class="table table-hover tablewd">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>$ 1,543,3345,432</td>
<td>$ 1,456,334,4545</td>
<td>$ 1,000,0202</td>
</tr>
</tbody>
</table>
</div>
Use Bootstrap-4's text-nowrap class for the table to avoid text break.
/* Source: Bootstrap-4 source code*/
.text-nowrap {
white-space: nowrap !important;
}
https://codepen.io/anon/pen/zLpzwe
You should add more css:
.table td { white-space: nowrap; }
This is a css question on a bootstrap panel. If you open my jsfiddle below and adjust the display so the overflow-x is activated, you'll see the blue background color of the bootstrap panel-heading transitions to white rather than keeping the blue. What is needed to retain the blue when overflow-x is activated?
CSS:
.panel-primary {
max-width: 100%;
overflow-x:scroll;
white-space: nowrap;
}
HTML:
<div class="row form-group">
<div class="panel panel-primary">
<div id="hpanel" class="panel-heading">Heading</div>
<div class="panel-body">
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Col1</th>
<th>Col2</th>
<th>Col3</th>
<th>Col4</th>
<th>Col5</th>
<th>Col6</th>
<th>Col7</th>
<th>Col8</th>
</tr>
</thead>
<tbody>
<tr>
<td>some data</td>
<td>some data</td>
<td>some data</td>
<td>some data</td>
<td>some data</td>
<td>some data</td>
<td>some data</td>
<td>some data</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
JS:
$(document).ready(function() {
var table = $('#example').DataTable( {
} );
} );
jsfiddle
Thanks
I answered my own question after playing around with several things. I created a div around the table.
<div class="table-responsive">
<table>
.....
</table>
</div>
This makes the table data responsive rather than the panel and resolves the color issue and probably better way to go about things anyway. I have updated my original fiddle with the updated code.
Thanks
If you put the below code in fullscreen, the elements are only centering on the page once I'm zoomed in enough. How can I make it so it's centered regardless?
.col-centered {
float: none;
text-align: center;
}
.col-centered table {
margin: 0 auto;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class='container-fluid'>
<div class='quiz-list'>
<div class='row'>
<div class='col-md-4 col-centered'>
This text should be centered and the table underneath should be centered as well
<table class="table">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>#mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>#fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>#twitter</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
Because Bootstrap.
The default value for width on a .col-md-4 is 33.3333%. So, since the div doesn't have float or margins or anything, it is simply aligned to the left side of the screen, and the content inside it is centred all right, but that isn't noticeable.
One solution is to remove the col-md-4 class.
.col-centered {
float: none;
text-align: center;
}
.col-centered table {
margin: 0 auto;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class='container-fluid'>
<div class='quiz-list'>
<div class='row'>
<div class='col-centered'> <!-- this -->
This text should be centered and the table underneath should be centered as well
<table class="table">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>#mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>#fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>#twitter</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
I tried other solutions as well, such as setting the width or the margins explicitly, but that doesn't seem to work.
Edit:
Oh, I see why the other solutions don't work: because in this snippet the Bootstrap css is loaded after the style block in the page.
Under normal circumstances, putting things in a stylesheet after loading the Bootstrap stylesheet will work fine to override it. So you can use width:auto or margin:0 auto, whatever you like.
In css file, Update
.col-centered {
float: none;
text-align: center;
}
as
.col-centered {
float: none !important;
text-align: center;
margin: 0 auto;
}
I have a responsive table where the end column shows money figures. Currently it looks like this:
But I want it to do this:
There may not be any data so the £ sign will be replace with N/A which should also be pulled to the right of the column.
The data is fetched from MySQL but here is a simplified snippet of my code:
<table id="mytable" class="table table-bordred table-striped">
<thead>
<th>Reference</th>
<th>Client</th>
<th>Description</th>
<th>Money</th>
</thead>
<tbody>
<tr>
<td>#1234</td>
<td>Josh Blease</td>
<td>Needs a new filter fixing</td>
<td class='money'>
<div class='text-right'>Budget: £123,456</div>
<div class='text-right'>Value: £200,000</div>
<div class='text-right'>Spent: N/A</div>
</td>
</tr>
</tbody>
Divs are useful but Ii don't think that be the best solution for this case maybe you need to use better the table properties
http://www.usabilidad.tv/tutoriales_html/colspan_y_rowspan.asp
<table id="mytable" class="table table-bordred table-striped">
<thead>
<th>Reference</th>
<th>Client</th>
<th>Description</th>
<th colspan="2">Money</th>
</thead>
<tbody>
<tr>
<td rowspan="4">#1234</td>
<td rowspan="4">Josh Blease</td>
<td rowspan="4">Needs a new filter fixing</td>
</tr>
<tr>
<td>Budget</td>
<td>£123,456</td>
</tr>
<tr>
<td>Value</td>
<td>£200,000</td>
</tr>
<tr>
<td>Spent</td>
<td>N/A</td>
</tr>
</tbody>
</table>
<table id="mytable" class="table table-bordred table-striped">
<thead>
<th>Reference</th>
<th>Client</th>
<th>Description</th>
<th>Money</th>
</thead>
<tbody>
<tr>
<td>#1234</td>
<td>Josh Blease</td>
<td>Needs a new filter fixing</td>
<td class='money'>
<div class='text-right'><span>Budget:</span> £123,456</div>
<div class='text-right'><span>Value:</span> £200,000</div>
<div class='text-right'><span>Spent:</span> N/A</div>
</td>
</tr>
</tbody>
and
#mytable tbody tr td .text-right span{
min-width:200px;
max-width:300px;
display: inline-block;
}
Spans need to be set as inline-block otherwise the width properties won't take hold as they are by default inline only elements.
Setting the min and max width will force the span container to not go below or above a certain point, meaning that your other text will be forced to stay to the left of the (example) 200px mark even if your initial text (as in spent) only ends up being (again, example) 80px