I have a problem with bootstrap table, on phone resolution, my table in phone resolution will appear like this:
Here is my code:
<table class="table table-hover table-dark mt-3 table-bordered">
<thead>
<tr>
<th scope="col" >#</th>
<th scope="col" >Value</th>
<th scope="col" >Action</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Username</th>
<td><?=$Username?></td>
<td></td>
</tr>
<tr>
<th scope="row">Email</th>
<td><?=$Email?></td>
<td></td>
</tr>
</tbody>
</table>
If you look the text of the photo you will see that the text "go out" from the screen, how can I fix it?
Add table-responsive class to the table. You can also make is specific to view breakpoints.
More details here
Related
I have a table that displays the properties from an object. I would want to know if there is an easy way of changing the text the cell display instead of the true/false that the value is set to.
Example. I have a column that informs if the object is open(true) or closed(false).
Instead of showing true/false I would like to show open/closed.
The column is "State". It is a boolean attribute.
Is it possible to make this only on the html or should I change something in the component file? (It's angular)
<table class="table table-dark table-condensed table-bordered table-striped table-hover">
<thead>
<tr>
<th scope="col">Id</th>
<th scope="col">Name</th>
<th scope="col">Description</th>
<th scope="col">State</th>
<th scope="col">Resolved By</th>
<th scope="col">Hours to resolve</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let bug of bugs">
<th scope = "row">{{bug.id}}
<td>{{bug.name}}</td>
<td>{{bug.description}}</td>
<td>{{bug.state}}</td>
<td>{{bug.resolvedBy}}</td>
<td>{{bug.hoursToResolve}}</td>
</tr>
</tbody>
</table>
</div>
Thanks!
Great example for a ternary operator:
<table class="table table-dark table-condensed table-bordered table-striped table-hover">
<thead>
<tr>
<th scope="col">Id</th>
<th scope="col">Name</th>
<th scope="col">Description</th>
<th scope="col">State</th>
<th scope="col">Resolved By</th>
<th scope="col">Hours to resolve</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let bug of bugs">
<th scope = "row">{{bug.id}}
<td>{{bug.name}}</td>
<td>{{bug.description}}</td>
<td>{{bug.state ? 'True Value Here' : 'False Value Here'}}</td>
<td>{{bug.resolvedBy}}</td>
<td>{{bug.hoursToResolve}}</td>
</tr>
</tbody>
</table>
</div>
I can't seem to align the table head with the table body.
This is for my project making a web-type student data-storing database.
<table class="table table-striped">
<thead>
<tr>
<th scope="col">Id</th>
<th scope="col">NIM</th>
<th scope="col">Nama</th>
<th scope="col">Jenis Kelamin</th>
<th scope="col">Alamat</th>
<th scope="col">Nama Bapak</th>
<th scope="col">Nama Ibu</th>
<th scope="col">Jurusan</th>
<th scope="col">Prodi</th>
<th scope="col">IPK Terakhir</th>
<th scope="col">Hapus</th>
</tr>
</thead>
<tbody *ngFor="let mhs of mhss">
<a routerLink="/detail/{{mhs.id}}">
<tr>
<td>{{mhs.id}}</td>
<td>{{mhs.nim}}</td>
<td>{{mhs.name}}</td>
<td>{{mhs.jk}}</td>
<td>{{mhs.alamat}}</td>
<td>{{mhs.nama_bapak}}</td>
<td>{{mhs.nama_ibu}}</td>
<td>{{mhs.jurusan}}</td>
<td>{{mhs.prodi}}</td>
<td>{{mhs.ipk}}</td>
<td><button class="delete" title="delete mhs"
(click)="delete(mhs)">HAPUS</button></td>
</tr>
</a>
</tbody>
</table>
My image:
Your code is generating a new <tbody> for every item in your array. Add the *ngfor structural directive to your table rows (<tr>).
Hello i have a table and i want to center a th between two other th.
I want to change the position of th Vieillesse de base to be displayed in the center of Provisionnel and Régularisation.
Here my HTML :
<div class="row mt-1">
<div class="col-12">
<table class="table table-striped table-adjust ">
<thead class="cordonnes-cabinet">
<tr>
<th scope="col">Date</th>
<th scope="col" style="text-align:center" colspan="2">Vieillesse de base</th>
<th scope="col" style="text-align:right">Complémentaire</th>
<th scope="col" style="text-align:right">Total</th>
</tr>
<tr>
<th scope="col">...</th>
<th scope="col" style="text-align:right">Provisionnel</th>
<th scope="col" style="text-align:right">Régularisation</th>
<th scope="col" style="text-align:right">...</th>
<th scope="col" style="text-align:right">...</th>
</tr>
</thead>
<tbody class="cordonnes-cabinet">
#for (int i = 0; i < echeancierGeneriqueAjustee.Count; i++)
{
<tr>
<th style="font-weight:100">#(echeancierGeneriqueAjustee[i]["Date"])</th>
<td style="text-align:right">#(echeancierGeneriqueAjustee[i]["MontantProv"])</td>
<td style="text-align:right">#(echeancierGeneriqueAjustee[i]["MontantRegul"])</td>
<td style="text-align:right">#(echeancierGeneriqueAjustee[i]["MontantComplement"])</td>
<td style="text-align:right">#(echeancierGeneriqueAjustee[i]["TotalEcheance"])</td>
</tr>
}
<tr>
<th style="font-size:14px">Total</th>
<td style="text-align:right">#(echeancierGeneriqueAjustee[0]["TotalProv"])</td>
<td style="text-align:right">#(echeancierGeneriqueAjustee[0]["TotalRegul"])</td>
<td style="text-align:right">#(echeancierGeneriqueAjustee[0]["TotalComplement"])</td>
<td style="text-align:right">#(echeancierGeneriqueAjustee[0]["Total"])</td>
</tr>
</tbody>
</table>
</div>
</div>
The key to do this is use html colspan in the th, to simulate equality of width with the second row. Then you only need to use .text-center.
In you particular case, use colspan="2" in the second th
JS FIDDLE DEMO
<table class="table">
<thead class="cordonnes-cabinet">
<tr>
<th>Date</th>
<th colspan="2" class="text-center">Vieillesse de base</th>
<th>Complémentaire</th>
<th>Total</th>
</tr>
<tr>
<th style="width:10%">...</th>
<th class="text-center">Provisionnel</th>
<th class="text-center">Régularisation</th>
<th>...</th>
<th>...</th>
</tr>
</thead>
<tbbody>
<tr>
<th>col1</th>
<td class="text-center">col2</td>
<td class="text-center">col3</td>
<td>col4</td>
<td>col5</td>
</tr>
</tbbody>
</table>
So the issue here is that your text is centered but the Column to the right is X wide and creates a optical illusion that your column is a lot wider.
I would set the column saying "Complémentaire" to text-align: left with class text-left then it will create the illuion you want.
Ive attached a picture where you can see that your code actually centers the text its just an optical illuion
This is how it would look with left aligned in the blue column:
And now its just a question on how to make it pretier with paddings on the td's and th's
I am trying to adapt some parts of my web application for mobile devices, and I am currently working on the following form using Html/css.
I came across this little problem concerning the table. In fact, I can't fix the size of the table cells. For the moment I am using the following code:
<table class="table table-striped table-hover table-bordered" id="sample_editable_1">
<thead>
<tr>
</tr>
<tr>
<th style="width:10px" >Date d'ajout </th>
<th style="width:10px">NOM DU FICHIER</th>
<th style="width:10px">Ajouté par </th>
</tr>
</thead>
<tbody>
<th>19/22/2016 </th>
<th>25_02_2016_file_name </th>
<th>testla team Fsqsf qsfqsqsfqg qsdg sdgsdg sdsgd sdsd</th>
</tbody>
</table>
so what's the right way to do it? thanks in advance
try with this below code it may help you.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="table-responsive">
<table class="table table-striped table-hover table-bordered" id="sample_editable_1">
<thead>
<tr>
</tr>
<tr>
<th style="width:10px" >Date d'ajout </th>
<th style="width:10px">NOM DU FICHIER</th>
<th style="width:10px">Ajouté par </th>
</tr>
</thead>
<tbody>
<th>19/22/2016 </th>
<th>25_02_2016_file_name </th>
<th>testla team Fsqsf qsfqsqsfqg qsdg sdgsdg sdsgd sdsd</th>
</tbody>
</table>
</div>
use width="100%" and it will take up the full space of the parent div / span that it is in.
If you are developing for mobile I would recommend using Bootstrap if you know it / looking at it if you don't. It's a very handy library for HTML when developing mobile compatible webpages.
Instead you can use a scroll for the table
table{overflow-x:auto}
I am using bootstrap's table-responsive to create a simple responsive table for my layout. However this class only works on mobile. Is there a way I can make it work on tablet as well?
<div class="histlog col-md-12">
<div class="table-responsive">
<table class="table table-striped">
<thead>
<tr>
<th class="hist1">One</th>
<th class="hist2">Two</th>
<th class="hist3">Three</th>
<th class="hist4">Four</th>
<th class="hist5">Five</th>
<th class="hist6">Siz</th>
<th class="hist7">Seven</th>
<th> </th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
</tbody>
</table>
</div>
Here is the code. it is just a simple table layout.
And this is how it looks on mobile, my cells got smaller. Even when i adjusted the widths on my css, it wont respond to it.
You may want to consider using the !important rule in your CSS for your widths if you want to force the table to maintain the columns displayed as you anticipate.
Or you can use white-space: nowrap; like the example below to force the columns to not insert break lines that otherwise would happen first before your table starts behaving in a responsive manner. In other words, you are forcing the table to become responsive before trying to move text to a second line.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<style>
td {
white-space: nowrap;
}
</style>
<div class="histlog col-md-12">
<div class="table-responsive">
<table class="table table-striped">
<thead>
<tr>
<th class="hist1">One</th>
<th class="hist2">Two</th>
<th class="hist3">Three</th>
<th class="hist4">Four</th>
<th class="hist5">Five</th>
<th class="hist6">Siz</th>
<th class="hist7">Seven</th>
<th> </th>
</tr>
</thead>
<tbody>
<tr>
<td>1asdfasdf</td>
<td>2asdfasdfasdf</td>
<td>3asdfasdfasdf</td>
<td>4asdfasd</td>
<td>5asdfasddf asdf as</td>
<td>6wer wer we </td>
<td>7asdf asdfwe </td>
<td>8sdfds f sd</td>
</tr>
</tbody>
</table>
</div>