How would I go about setting up an html table to use sticky headers and set the stickyHeaderOffsetY option.
The examples for
https://bootstrap-table.com/docs/extensions/sticky-header/ all assume you're using javascript to populate the tables and I cannot find any documentation on how to set the options any other way.
This is as far as I have gotten:
<table
data-toggle="table"
data-search="true"
data-sticky-header="true"
data-sortable="true"
data-show-columns="true"
class="table table-striped table-hover table-condensed">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john#example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary#example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#example.com</td>
</tr>
</tbody>
</table>
Sorry I cant comment, but do you try this?
<table
data-sticky-header="true"
data-sticky-header-offset-y="60"
></table>
Related
I'm creating what's basically a todo app that has a calendar, it's specifically for seniors/vision impaired people and I need the calendar to be the full height of the browser.
I'm using a Bootstap 4.5 bordered table for the calendar but still can't get it to be the full height of the browser.
I've tried setting the .table class height to 100%. I've also tried using the Bootstrap sizing and flex utility classes of "h-auto" and "d-flex" as well.
<table class="table table-bordered h-auto">
<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 the Bird</td>
<td>Bird</td>
<td>#LBird</td>
</tr>
</tbody>
</table>
you can give the table element the css style:
table{
min-height: -webkit-fill-available;
}
<div className="table-responsive">
<table className="table table-sm">
<thead>
<tr className="table-active">
<th>name</th>
<th>nickname</th>
<th>age</th>
<th>gender</th>
<th>height</th>
<th>weight</th>
</tr>
</thead>
<tbody id="table-body">
<tr>
<td>Alex</td>
<td>Alex</td>
<td>24</td>
<td>Male</td>
<td>1.70</td>
<td>60</td>
<tr>
</tbody>
</table>
</div>
i want css style scrollable in header table and under table and don't want fixed head table on top
so i was searching all day in google I can't found result i want please tell or help me.
I would like the first two columns to only occupy the width of their contents, and for the final 3rd column to be justified to the right with a gap (if any) between the 2nd and 3rd columns as immediately below. In the diagram I have marked this as a large empty column.
+-------+------+-------------------+------+
| Col1 | Col2 | | Col3 |
+-------+------+-------------------+------+
| Val 1 | Val2 | | Val3 |
+-------+------+-------------------+------+
Some restraints:
I can use only bootstrap.
I cant use any custom styles.
I've tried it as follows, but it's not working.
<table class="table table-bordered">
<thead>
<tr class="row">
<td class="col-md-1">col1</td>
<td class="col-md-1">col2</td>
<td class="col-md-9"></td>
<td class="col-md-1">col3</td>
</tr>
</thead>
<tbody>
<tr class="row">
<td class="col-md-1">val1</td>
<td class="col-md-1">val2</td>
<td class="col-md-9"></td>
<td class="col-md-1">val3</td>
</tr>
</tbody>
</table>
Bootstrap 4
<table class="table table-bordered">
<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>
</tbody>
</table>
Bootstrap 3
<table class="table table-bordered">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john#example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary#example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#example.com</td>
</tr>
</tbody>
</table>
Check which version you are using for bootstrap. If any of the above code is not working please check you imported the bootstrap properly or not.
Is it possible to separate each row using a margin, in a striped table in bootstrap v4. I want each row to spaced out a little to be more readable.
<table class="table table-striped">
<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>
Table rows does not have margin values. You may consider to use padding values to td.
For reference :
.table td{
padding-bottom: 10px;
}
I have problem with my table JqMobile style is not working when I uploaded to the server I want datat be horizontal not broken.
http://jsfiddle.net/Tbu9U/
html
<table data-role="table" id="productOrders" data-mode="reflow" class="ui-table ui-table-reflow">
<thead>
<tr>
<th>Code</th>
<th>Name</th>
<th>Price</th>
<th>Qty.</th>
<th>Ext.</th>
</tr>
</thead>
<tbody>
<tr>
<td><b class="ui-table-cell-label">Code</b></td>
<td><b class="ui-table-cell-label">Name</b></td>
<td><b class="ui-table-cell-label">Price</b></td>
<td><b class="ui-table-cell-label">Qty.</b></td>
<td><b class="ui-table-cell-label">Ext.</b></td>
</tr>
<tr>
<td>uj7uu</td>
<td>games</td>
<td class="dollars">$70</td>
<td>3</td>
<td>$210</td>
</tr>
</tbody>
</table>
Here is your fiddle updated: http://jsfiddle.net/ezanker/Tbu9U/1/
The only change was on the table markup, remove the class ui-table-reflow and instead add ui-responsive:
<table data-role="table" id="productOrders" data-mode="reflow" class="ui-table ui-responsive">