I'm trying to customize my bootstrap table. If the table height is larger than a certain height I want the <tbody> to scroll without scrolling the rest of the table. I have tried pretty much everything I can think of but the table wont even change sizes.
Does anyone know what classes I need to modify to fix this? Here's the elements I use in my table:
<div class="table-responsive">
<table class="table table-condensed">
<colgroup>
<col class="col-xs-1"/>
<col class="col-xs-1"/>
</colgroup>
<thead>
<tr>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</div>
And here's a jsFiddle.
I ran into a similar problem with Bootstrap 2.3.2. I had to modify my table some, but a pretty good website I found with a complete css solution is here:
http://www.cssbakery.com/2010/12/css-scrolling-tables-with-fixed.html
I basically took the scrollableArea and scrollableContainer css parts on this site, changed a couple class names to match with what I already had, and used this instead of bootstrap. Maybe this can help, maybe not, but definitely a good alternative.
Related
I've googled a bit to find the solution for transforming a multi-cell table into one cell table, using css (media) DYNAMICALLY!. I found a solution which is not good, because it's mixing results.
This is what I am trying to do...
<table style="width:100%">
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
RESULT:
One cell table: Jill,Smith,50,Eve,Jackson,94
<table style="width:100%">
<tr>
<td>Jill
Smith
50
Eve
Jackson
94</td>
</tr>
</table>
If the above is what you are trying to do, then you can't. CSS can not alter your HTML code this way.
<table style="width:200px">
<tr style="width:100px; position:absolute">
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr style="width:100px; left:100px; position:absolute">
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
Now this may LOOK like it is one cell, since the two rows are inline thanks to the absolute positioning (display:inline-block doesn't work). I made it simple. You can use percentages, to make it somewhat more flexible, but I really DO NOT RECOMMEND you to go this way.
I think your issue, whatever it may be, should be solved differently, then by merging cells.
How do I import only tables from the Bootstrap framework?
What I want to do: I have found a couple of table examples from Bootstrap that I really like which I would like to import into my project.
The issue: When importing Bootstrap, in addition to tables, there are changes to other tags such as h1, h2, title and html.
What I tried: I got a minimized/customized Bootstrap that supposedly has only tables, but there are still changes to h1, h2, etc.
normaly you should use the whole bootstrap package. There are great classes inside to make your whole page responsive.
If you only love the stilling of the tables maybe this snippet helps you:
https://gist.github.com/luisciphere/3c2d1710d90372784b072ebbcaf7bde4
With bootstrap3 you were able to customize the package and just choose tables: https://getbootstrap.com/docs/3.4/customize/
With bootstrap4 this option is gone. So I you basically have two choices:
download the full package as unminified version and delete everything you don't need
download the bootstrap sources (SASS) and only compile the table stuff
With bootstrap 4, you will need to create a custom sass file and import the following bootstrap source files:
#import 'plugins/bootstrap/scss/_mixins';
#import 'plugins/bootstrap/scss/_tables';
This should enable you to make use of Twitter's table only.
For example:
<table class="table table-striped table-dark">
<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>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>
Note: you may still have conflicts, but this all depends on how your CSS is structured.
I have created a Rails 4 sample app. I added the twitter-bootstrap-rails gem and used the installer to set up all the files: rails generate bootstrap:install less. I then created a scaffold and migrated the database and the bootstrap.css showed up like it should of. I then created a model/view/controller by hand with no scaffolding and the bootstrap css is not being used on it. Here is my view:
<table class="table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
</thead>
<tr>
<td>Jason</td>
<td>John</td>
</tr>
<tbody>
</tbody>
</table>
I should have a striped table, but it is not working. Any ideas? Thanks.
IS it a copy paste error or is it your code?
notice that the row is not in the tbody and you only have one row put more then one to see if it is striped
Check in browser if your bootstrap classes are coming you can do this by searching for any bootstrap class in complied css . if it is not there check in application css file in assets folder if bootstrap is included or not ...
also correct your markup ...
<table class="table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr>
<td>Jason</td>
<td>John</td>
</tr>
</tbody>
</table>
I am using a table with style table-layout:fixed to solve wrap problems. The table content is dynamic produced with PHP. When the page is rendered, many cells content doens't appear!
The content appear if I pass the mouse up the cell. If I resize the window manually, all the cell content appear!
What I can do? I accept any solution! Can be javascript, CSS, PHP...
Thanks!
Simone
It sounds like you need to style the headers in the first row of the table in order to establish a width for each column.
<table>
<tr>
<th style="width:100px;">Header 1</th>
<th style="width:100px;">Header 2</th>
</tr>
<tr>
<td>Value 1</td>
<td>Value 2</td>
</tr>
</table>
I'd like to have a normal table to look like RadGrids, is there an easy way I can use the RadGrid styles (keeping theming in mind)?
Using a tool like Firebug, you can inspect the table generated by RadGrid.
The example shown on this page gives the following results:
<table class="rgMasterTable rgClipCells">
<thead>
<th class="rgHeader" scope="col">header</th>
</thead>
<tbody>
<td class="rgRow">cell</td>
</tbody>
</table>
Adding the classes stated here to your own table should copy the style from the rad grid.
I have been playing with this, and it seems you need to wrap the table in div(s) with certain styles - maybe due to themes? Maybe I'm still missing something, but this is the only way I could get it to work.
<div class="RadGrid RadGrid_Sunset">
<table class="rgMasterTable rgClipCells">
<thead>
<th class="rgHeader" scope="col">header</th>
</thead>
<tbody>
<td class="rgRow">cell</td>
</tbody>
</table>
</div>