I have datatables inside of bootstrap cards, but when the table is larger than the height of the card, it will exceed outside of the card. I have an overflow: auto on a table-wrapper which also does not trigger once exceeding the cards height.
heres a simplified example:
https://stackblitz.com/edit/js-bootstrap4-gbnhfx?file=style.css
I've forked you stackblitz (https://stackblitz.com/edit/js-bootstrap4-tsnbuq)
I've used a style attr here for simplicity. But the inner div is the item being overflowed, and then your outer div (which you have CSS which handles overflow) is adding scroll.
Here is the main change:
<div class="table-wrap">
<div style="height:690px">
<table class="table table-sm table-dark table-striped">
<thead>
</thead>
<tbody>
<tr>
<td>test</td>
</tr>
</tbody>
</table>
</div>
</div>
Related
<div class="row">
<div class="col-md-8">
<h3 data-toggle="collapse" data-target="#collapseList" aria-expanded="false" aria-controls="collapseList"> 1 Lecturer List</h3>
<table class="table table-bordered collapse" id="collapseList">
<thead>
<tr>
<th>List Id</th>
<th>List Name</th>
<th>Total Subscribers</th>
<th>Action</th>
<th>Problems</th>
</tr>
</thead>
<tr>
<td>a</td>
<td>abcdefg</td>
<td>a</td>
<td>Synchronize</td>
<td>NOK</td>
</tr>
</table>
</div>
</div>
This is what I have when I click on the header label, it appears 1 second :
And after 1 second, this is what I have :
Why does my table is resized after the collapsing ? Is there a way to not resize the table ?
UPDATE :
Here's a JSfiddle, you can try and see yourself that there's a problem https://jsfiddle.net/0zw5a845/
Add the following CSS line to your main style sheet. This essentially overwrites the .collapse.in selector of the bootstrap style sheet.
.collapse.in {display:table}
Updated JSFiddle
Possibly due to the fact that your div has a class of col-md-8.
If you want a table spanning the full width of a page, change the class to col-md-12.
When I'm adding tr rows to an existing tbody, the table's width "magically" changes - why is that so / how to prevent that?
My HTML:
<table class="table table-hover table-sm" style="width: 50%">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Info</th>
</tr>
</thead>
<tbody id="list">
</tbody>
</table>
This table resides within a Bootstrap Grid column (within a fluid container, if that matters). In the beginning the table fills 50% of the width of the grid column, after adding rows via JavaScript the table's width changes and even outgrows the grid resulting in a bad design.
Add this class to your table
.is-breakable {
word-break: break-word;
}
I have the following code to display comparison of items
<table>
<tr> <!-- Iterating over list of Headers -->
<td>
<div class="Header"><h4>Header Value</h4></div>
<div class="HeaderList"><span>Key</span> <!-- Iterating over list of keys-->
</td>
<td> <!-- Iterating over multiple items -->
<div class="Header"></div>
<div class="HeaderList"><span>Value</span> <!-- Displaying Value next to the key by iterating over them-->
</td>
</tr>
</table>
I want to align the divs with class "Header" and "HeaderValueList" across multiple td.
The value in Header can extend to multiple lines if needed.
I want to set a maximum height for "HeaderKeyList" and "HeaderValueList" not to cross 32px but if its less than that, the height should be dynamically variable and should align across tds.
I have the following css
.HeaderList
{
width:100%;
height:auto;
max-height:32px;
overflow: hidden;
padding-top: 0.5px;
padding-bottom: 0.5px;
}
.Header
{
width:100%;
}
When any of the value spans across multiple rows, my alignment goes awry. Please help. I am open to making changes in javascript as well.
Thanks in advance.
To group rows in a table together, you use tbody. One tbody for each of the lists. So the HTML becomes
<table>
<thead>
<tr>
<th></th>
<th>Item1</th>
<th>Item2</th>
</tr>
</thead>
<tbody>
<!-- Iterating over list of Headers -->
<tr class="Header">
<th>Header Value1</th><td></td><td></td>
</tr>
<tr>
<td><div class="HeaderKey">Key1</div></td>
<td><div class="HeaderValue">Item1Value1</div></td>
<td><div class="HeaderValue">Item2Value1</div></td>
</tr>
<tr>
<td><div class="HeaderKey">Key2</div></td>
<td><div class="HeaderValue">Item1Value2</div></td>
<td><div class="HeaderValue">Item2Value2</div></td>
</tr>
<tr>
<td><div class="HeaderKey">Key3</div></td>
<td><div class="HeaderValue">Item1Value3</div></td>
<td><div class="HeaderValue">Item2Value3</div></td>
</tr>
</tbody>
<tbody>
<!-- Iterating over list of Headers -->
<tr class="Header">
<th>Header Value2</th><td></td><td></td>
etc, with this result:
See fiddle.
I made one of the values a bit wider, to demonstrate that if you make the window narrower, the div will grow to two lines, and the cells to the left and right will remain lined up (vertically centered; but you can change that) and if you make the window narrower still, the div doesn't grow to more than two lines because of the max-height.
I am using bootstrap 3.2 in my application.
I am wrapping two col-md-6 in a row.
One column is having a some content. The other col is empty
I want the other column to be of same height as the col that is having some text
The height should be fixed height with scroll bar.
I can't set the height manually as height can change
See the attached screen shot
Use col-md-12 instead of col-md-6
<style>
.table tr td{width:50%;}
</style>
<table class="table table-bordered">
<tbody>
<tr>
<td>
Your text
</td>
<td>
</td>
</tr>
</tbody>
</table>
Try this:
DEMO
var height = $("#Col1")[0].clientHeight;
$("#Col2").css('height', height + 'px');
How could I make it so that a table inside a container with its own width does not follow the width of the container and instead, retain the table's width when it's not inside the container. I have a very wide table that I want to fit inside a col-md-9 container and it displays bad because it squeezes the table to fit to the container. I have tried min-width for the table but it is not flexible as adding more columns to my table will squeeze it again. Would it be possible to make the table's width auto while not following the parent's width?
<div class="col-md-9" style="overflow-x: auto">
<table class="table table-bordered" style="width:auto">
<tbody>
<tr>
.... contents
</tr>
<tbody>
</table>
</div>
Here is one possiblity for you if you are using Bootstrap 3
live view: http://fiddle.jshell.net/panchroma/vPH8N/10/show/
edit view: http://jsfiddle.net/panchroma/vPH8N/
I'm using the resposive table code from http://getbootstrap.com/css/#tables-responsive
ie:
<div class="table-responsive">
<table class="table">
...
</table>
</div>
#Ciwan. You're right. The table goes to full width (much too wide). Not a good solution. Better to do this:
css:
.scrollme {
overflow-x: auto;
}
html:
<div class="scrollme">
<table class="table table-responsive"> ...
</table>
</div>
Edit: changing scroll-y to scroll-x
You can also check for bootstrap datatable plugin as well for above issue.
It will have a large column table scrollable feature with lot of other options
$(document).ready(function() {
$('#example').dataTable( {
"scrollX": true
} );
} );
for more info with example please check out this link