When using a newer version of bootstrap table than 1.14.2 my filter control does not work any more. I want to have a select field (which I have), but when choosing any value from the dropdown field nothing is filtered. It worked perfectly well for version 1.14.2.
I am filling my table from an php script. The values in the select field are there, just the filtering does not happen.
I am using the newest version of Joomla on my website
1.14.2 version which worked: https://12ndr.at/entry-ranking-men
1.15.3 version which does not work: https://12ndr.at/entry-ranking-men-old
<link href="https://unpkg.com/bootstrap-table#1.14.2/dist/bootstrap-table.min.css" rel="stylesheet">
<script src="https://unpkg.com/bootstrap-table#1.14.2/dist/bootstrap-table.min.js"></script>
<script src="https://unpkg.com/bootstrap-table#1.14.2/dist/extensions/filter-control/bootstrap-table-filter-control.min.js"></script>
<script src="https://unpkg.com/bootstrap-table#1.14.2/dist/extensions/accent-neutralise/bootstrap-table-accent-neutralise.min.js"></script>
<script src="https://unpkg.com/bootstrap-table#1.14.2/dist/extensions/fixed-columns/bootstrap-table-fixed-columns.js"></script>
<div class="table-responsive table-sm small">
<table class="table table-bordered table-striped table-hover table-condensed" data-filter-control="true" data-search="true" data-search-accent-neutralise="true" data-search-align="left" data-sort-name="Position" data-sortable="true" data-toggle="table" data-url="https://12ndr.at/scripts/ranking.php?gender=m">
<thead>
<tr>
<th colspan="4" data-halign="center"> </th>
<th colspan="3" data-halign="center">Entry Ranking</th>
<th colspan="3" data-halign="center">World Ranking</th>
</tr>
<tr>
<th data-field="Position" data-order="asc" data-sortable="true">Position</th>
<th data-field="TeamName" data-sortable="true" data-width="500" data-width-unit="%">Team</th>
<th data-field="Federation" data-filter-control="select" data-filter-control-placeholder="Country" data-sortable="true"> </th>
<th data-field="Flag" data-sortable="false"> </th>
<th class="font-weight-bold" data-field="EntryPointsTeam" data-sortable="true">Points</th>
<th data-field="EntryPointsPlayer1" data-sortable="true">Points #1</th>
<th data-field="EntryPointsPlayer2" data-sortable="true">Points #2</th>
<th class="font-weight-bold" data-field="RankingPointsTeam" data-sortable="true">Points</th>
<th data-field="RankingPointsPlayer1" data-sortable="true">Points #1</th>
<th data-field="RankingPointsPlayer2" data-sortable="true">Points #2</th>
</tr>
</thead>
</table>
</div>
Related
<table class="table">
<thead>
<tr class="d-flex">
<th class="col-0">JOB ID</th>
<th class="col-0">JOB STATUS</th>
<th class="col-0">USER</th>
<th class="col-0">BG TASK STATUS</th>
<th class="col-2">BG TASK RESULT</th>
<th class="col-0">BG TASK CREATED TIME</th>
<th class="col-0">BG TASK COMPLETED TIME</th>
<th class="col-0">DETAIL LOG LINK</th>
</tr>
</thead>
<tbody>
<tr class="d-flex">
<td class="col-0">15</td>
<td class="col-0">success</td>
<td class="col-0">None</td>
<td class="col-0"></td>
<td class="col-2"></td>
<td class="col-0"></td>
<td class="col-0"></td>
<td class="col-0">Job Details</td>
</tr>
</tbody>
</table>
Delete the className="d-flex" in tr tag
You can add the class text-justify to the table so that the text will be aligned to center
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;
}
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; }
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<table class="table table-striped table-hover table-responsive">
<thead>
<th scope="col">column1</th>
<th scope="col">column2</th>
<th scope="col">column3</th>
</thead>
<tbody>
<tr>
<td>item1</td>
<td>item2</td>
<td>item3</td>
</tr>
<tr>
<td>item1</td>
<td>item2</td>
<td>item3</td>
</tr>
</tbody>
</table>
Is it possible to center this table without giving the table a width other than 100%? Most of the answers I've found for doing this all give the table a width less than 100%. This isn't very nice since when you then center the element if the display is big enough the table still appears to not be centered.
Use mx-auto w-auto to horizontal center. Also, the table should be inside table-responsive...
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<div class="table-responsive">
<table class="table table-striped table-hover mx-auto w-auto">
<thead>
<tr>
<th scope="col">column1</th>
<th scope="col">column2</th>
<th scope="col">column3</th>
</tr>
</thead>
<tbody>
<tr>
<td>item1</td>
<td>item2</td>
<td>item3</td>
</tr>
<tr>
<td>item1</td>
<td>item2</td>
<td>item3</td>
</tr>
</tbody>
</table>
</div>
https://codeply.com/go/gotnKXfdw2
You must put your table inside a div with table-responsive class like below,
<div class="table-responsive">
<table class="table table-striped table-hover">
<thead>
<th scope="col">column1</th>
<th scope="col">column2</th>
<th scope="col">column3</th>
</thead>
<tbody>
<tr>
<td>item1</td>
<td>item2</td>
<td>item3</td>
</tr>
<tr>
<td>item1</td>
<td>item2</td>
<td>item3</td>
</tr>
</tbody>
</table>
</div>
Update:
To center table with not 100% width do like above, and give below style to your .table class.
{
width:auto;
margin:0 auto;
}
hope this works:
<div class="container table-responsive">
<table class="table table-striped table-hover ">
<thead>
<th scope="col">column1</th>
<th scope="col">column2</th>
<th scope="col">column3</th>
</thead>
<tbody>
<tr>
<td>item1</td>
<td>item2</td>
<td>item3</td>
</tr>
<tr>
<td>item1</td>
<td>item2</td>
<td>item3</td>
</tr>
</tbody>
</table>
</div>
Try this code sample one directly from the bootstrap website.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<table class="table text-center">
<thead>
<tr>
<th scope="col">column1</th>
<th scope="col">column2</th>
<th scope="col">column3</th>
</tr>
</thead>
<tbody>
<tr>
<td>item1</td>
<td>item2</td>
<td>item3</td>
</tr>
<tr>
<td>item1</td>
<td>item2</td>
<td>item3</td>
</tr>
</tbody>
</table>
I have created a scrollable gridview. So I have created a table which is the copy of grid header. I give width property to each with pixel. But it works different in different browsers. Any help appreciated.
This is the markup of Grid header.
<table cellpadding="0" cellspacing="0">
<tr>
<th width="26px">
</th>
<th width="152px">
Sosial sığorta nömrəsi
</th>
<th width="122px">
Soyadı
</th>
<th width="121px">
Adı
</th>
<th width="120px">
Atasının adı
</th>
<th width="50px">
Cinsi
</th>
<th width="100px">
Doğum tarixi
</th>
<th width="122px">
Uçota düşmə tarixi
</th>
<th width="102px">
SUN (köhnə)
</th>
<th width="150px">
Sığorta edənin VÖEN-i
</th>
<th width="102px">
SUN
</th>
<th width="102px">
Ölüm tarixi
</th>
</tr>
</table>
Instead of creating 2 tables, one for the header and another for the data - just create a single table...
Something like this should have all your columns in the correct width:
<table cellpadding="0" cellspacing="0">
<tr>
<th width="26px">
</th>
<th width="152px">
Sosial sığorta nömrəsi
</th>
.....
<th width="102px">
Ölüm tarixi
</th>
</tr>
<tr> <!-- Enter data here -->
</tr>
<tr> <!-- Enter data here -->
</tr>
</table>
As Blachshma said, you can use only one table for that to fix the column width same for all browsers... And I think, Making table/grid scrollable is an easy task...
Try this..
<div style="max-width:500px;overflow:auto;">
// Here, HTML code for Table or Gridview
</div>
Hope, it helps you. !!
Thanks.