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');
Related
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>
I have a table with a format like this
<table>
<thead>
<th> </th>
<th>foo1</th>
<th>foo2</th>
</thead>
<tbody>
<tr>
<th>Text that makes the cell use two lines of height</th>
<td className="grid-item">
<b>P</b>
</td>
<td className="grid-item">
<div>✔ 17/10/2019</div>
</td>
</tr>
/* more tr s */
</tbody>
</table>
and when click a external button, it turns something like this:
<table>
<thead>
<th> </th>
<th>foo1</th>
<th>foo2</th>
</thead>
<tbody>
<tr>
<th>Text that makes the cell use two lines of height</th>
<td className="grid-item green_border">
<div className="clickeable-cpopup">
<b>P</b>
</div>
</td>
<td className="grid-item green_border">
<div className="clickeable-cpopup">
<div>✔ 17/10/2019</div>
</div>
</td>
</tr>
/* more tr s */
</tbody>
</table>
and the div "clickeable-cpopup" has a onClick function and it needs to fill all space of its td parent, height and width, otherwise i click the td instead of the div and nothing happens.
the "grid-item" has padding: 0 and i tried the solution of apply display: flex to the "grid-item", it works in filling the space but the table format gets messed up.
Also I tried with better results giving position: relative to the "grid-item" and absolute to both "clickeable-cpopup" and "content". The clickeable div use all space in the td but then the cell that contains the date doesnt adjust to its content (the width of the cell is smaller that the lengh of the date)
How could I achieve this? I would like to avoid make the td clickeable.
Fixing the cell size is not a good option, a column that only contains <b>P</b> should be smaller thant a column that contains both P and date, an P could become a date and vice versa and some headers of the first column may use 2 lines of height.
And of course neither width: auto nor 100% work since the "grid-item" doesn't have a fixed size
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
I have table like this:
<table class="table table-bordered">
<tbody data-bind="foreach: { data: dataset, as: 'rowInfo' }">
<tr style="max-height: 30px"
data-bind="foreach: { data: $parent.metadata, as: 'colInfo' }">
<td style="max-height: 30px" data-bind="text: rowInfo[colInfo.DataColumn],
attr: {width: Width}"></td>
</tr>
</tbody>
</table>
I want to have a grid like experience. So I don't want the text to wrap in the cell or make the cells to resize.
I want to have fixed sized cells which their height set to 30px and the width set to the colInfo.Width which comes from knockout.
But with the above code, the cells re-size to fit their content. How should I set the attributes to have fixed height and width?
To give a max-height to cell contents you'll need to wrap it in another element (e.g. a div). In addition, I'd recommend using the style binding, like this:
<td>
<div data-bind="text: rowInfo[colInfo.DataColumn],
style: { width: Width, height: '30px' }"></div>
</td>
See this fiddle for a working demo.
I have some text in table column which is greater than the column width I want. So text is overflowing from it. So I apply overflow:auto but in this case it is showing scroll on every page where data is less than the width of the column.
I don't want to show the scroll on that page where data is less than the width of column just want to show only where data is greater than its length.
Does any one have some suggestions?
<td style=" width:50%;overflow:auto;>
Try to wrap td content in div with fixed width and overflow: auto
For example:
<table>
<tr>
<td>some content</td>
<td> <!-- your fixed width column -->
<div style="width: 100px; overflow: scroll;">
Loremipsumdolorsitametconsectetuadipisicingelit
</div>
</td>
</tr>
</table>
use this <td style=" width:50%;overflow:scroll;">
This will insert horizontal and vertical scrollbars.
They will become active only if the content requires it.