Display content inline inside to bootstrap table - css

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; }

Related

Angular material: table inside mat-expansion not aligned to other table

Im added to Angular website for table ,that table col is not align ,any one know how to do that correctly ?
Thanks
<div class="table-responsive ">
<table class="table" style="width: 100%">
<thead>
<tr>
<th scope="col" width="50">ID</th>
<th scope="col" width="300">Book Name</th>
<th scope="col" width="250">Total Book</th>
<th scope="col" width="250">Date</th>
<th scope="col" width="250">Remarks</th>
<th scope="col" width="250">Booking Date</th>
<th scope="col" width="250">Booking Status</th>
</tr>
</thead>
</table>
</div>
<mat-accordion>
<mat-expansion-panel (opened)="panelOpenState = true; openContent(order)"
(closed)="panelOpenState = false">
<mat-expansion-panel-header [collapsedHeight]="customCollapsedHeight"
[expandedHeight]="customExpandedHeight">
<table class="table ">
<tbody>
<tr>
<td class="tb-td-txt" width="50">12</td>
<td class="tb-td-txt" width="300">ABC</td>
<td class="tb-td-txt" width="250">100}</td>
<td class="tb-td-txt" width="250">10-11-2018</td>
<td class="tb-td-txt" width="250">Jhone Doe</td>
<td class="tb-td-txt" width="250">10-05-2019</td>
<td class="tb-td-txt" width="250">Completed</td>
</tr>
</tbody>
</table>
</mat-expansion-panel-header>
</mat-accordion>
There are a few things...
the lower table is a child of .mat-expansion-panel, so for the table outside it, we mimic the padding:0 24px
but there is also a down arrow for mat-expansion-indicator so we gotta increase the padding on the right side by 8px
next, we text-align center for the bottom table (which is inside the mat-expansion) so that the effect is similar
I have also put a red borders on the <td> so that you can see this
relevant CSS:
th, td{border:1px solid red;}
.table-responsive>.table{padding:0 32px 0 24px;}
mat-expansion-panel-header .table td{text-align: center}
complete working stackblitz here

Center bootstrap table with 100% width?

<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>

Align text at each end of a column - Bootstrap

I have a responsive table where the end column shows money figures. Currently it looks like this:
But I want it to do this:
There may not be any data so the £ sign will be replace with N/A which should also be pulled to the right of the column.
The data is fetched from MySQL but here is a simplified snippet of my code:
<table id="mytable" class="table table-bordred table-striped">
<thead>
<th>Reference</th>
<th>Client</th>
<th>Description</th>
<th>Money</th>
</thead>
<tbody>
<tr>
<td>#1234</td>
<td>Josh Blease</td>
<td>Needs a new filter fixing</td>
<td class='money'>
<div class='text-right'>Budget: £123,456</div>
<div class='text-right'>Value: £200,000</div>
<div class='text-right'>Spent: N/A</div>
</td>
</tr>
</tbody>
Divs are useful but Ii don't think that be the best solution for this case maybe you need to use better the table properties
http://www.usabilidad.tv/tutoriales_html/colspan_y_rowspan.asp
<table id="mytable" class="table table-bordred table-striped">
<thead>
<th>Reference</th>
<th>Client</th>
<th>Description</th>
<th colspan="2">Money</th>
</thead>
<tbody>
<tr>
<td rowspan="4">#1234</td>
<td rowspan="4">Josh Blease</td>
<td rowspan="4">Needs a new filter fixing</td>
</tr>
<tr>
<td>Budget</td>
<td>£123,456</td>
</tr>
<tr>
<td>Value</td>
<td>£200,000</td>
</tr>
<tr>
<td>Spent</td>
<td>N/A</td>
</tr>
</tbody>
</table>
<table id="mytable" class="table table-bordred table-striped">
<thead>
<th>Reference</th>
<th>Client</th>
<th>Description</th>
<th>Money</th>
</thead>
<tbody>
<tr>
<td>#1234</td>
<td>Josh Blease</td>
<td>Needs a new filter fixing</td>
<td class='money'>
<div class='text-right'><span>Budget:</span> £123,456</div>
<div class='text-right'><span>Value:</span> £200,000</div>
<div class='text-right'><span>Spent:</span> N/A</div>
</td>
</tr>
</tbody>
and
#mytable tbody tr td .text-right span{
min-width:200px;
max-width:300px;
display: inline-block;
}
Spans need to be set as inline-block otherwise the width properties won't take hold as they are by default inline only elements.
Setting the min and max width will force the span container to not go below or above a certain point, meaning that your other text will be forced to stay to the left of the (example) 200px mark even if your initial text (as in spent) only ends up being (again, example) 80px

Get the header of my table fixed

I would like to get the header of my table fixed, so it could be always visible while scrolling down. The height of my table would be fixed to 500 px.
Here is a plunkr:
enter link description here
<table class="table table-striped table-bordered">
<thead>
<tr>
<th style="text-align:center">Produit</th>
<th style="text-align:center">Emballage</th>
<th style="text-align:center">Certificat Fourn.</th>
<th style="text-align:center">Marque</th>
<th style="text-align:center">Catégorie</th>
<th style="text-align:center">Calibre</th>
<th style="text-align:center" colspan="3">20/03</th>
<th style="text-align:center" colspan="3">21/03</th>
<th style="text-align:center" colspan="3">22/03</th>
<th style="text-align:center" colspan="3">23/03</th>
</tr>
<tr>
<th colspan="6"></th>
<th>Rsr</th>
<th>Arr</th>
<th>Dsp</th>
<th>Rsr</th>
<th>Arr</th>
<th>Dsp</th>
<th>Rsr</th>
<th>Arr</th>
<th>Dsp</th>
<th>Rsr</th>
<th>Arr</th>
<th>Dsp</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="planning in data">
<td style="text-align:center">
{{planning.produit}}
</td>
<td style="text-align:center">
{{planning.emballage}}
</td>
<td style="text-align:center">
{{planning.certificatFournisseur}}
</td>
...
<td style="text-align:center">
{{planning.dispJ4}}
</td>
</tr>
</tbody>
</table>
I have looked over the net, but I didn"t find any nice solution.
Thanks for you help.
You have to split your table to one with headers and a second one with data. Then add javascript that on scroll (detect if the position of your header table are near the 0 of screen and if yes then add css style for your header table -> position:fixed top:0px ;
you will also have a reverse javascript for removing position: fixed when viewer scroll up.
EDIT
If you dont care to lose table from page you can juse use 2 tables (header and content) put content's table's height = 500px - header's table's height and for content's table css overflow:scroll
I have found a solution that works pretty well on one of my tables.
I have tried to apply it to another table but I am getting differences between td width and th width. I don't know why, even if I set the same width to each one of them.
If anyone can explain to me the reason why...
Thanks!
Plunkr :
http://plnkr.co/edit/kDxIYzmO6onqqZcZIURc?p=preview
<!DOCTYPE html>
<html>
<head>
<link data-require="bootstrap-css#*" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<div>
<table class="table table-bordered table-hover" style="font-size:11px;table-layout: fixed; margin-bottom:0px">
<thead>
<tr>
<th style="text-align:center;width:168px">Fournisseur</th>
<th style="text-align:center;width:148px">Désignation</th>
<th style="text-align:center;width:81px">Date</th>
<th style="text-align:center;width:53px">Colis</th>
<th style="text-align:center;width:53px">Brut</th>
<th style="text-align:center;width:53px">Tare</th>
<th style="text-align:center;width:78px">Poids net</th>
<th style="text-align:center;width:58px">Pièces</th>
<th style="text-align:center;width:68px">Palette</th>
<th style="text-align:center;width:53px">Valo</th>
<th style="text-align:center;width:98px">Prix unit ht</th>
<th style="text-align:center;width:58px">H.T.</th>
<th style="text-align:center;width:58px">Tva</th>
</tr>
</thead>
</table>
<div class="wrap_scrollable">
<div class="scrollable">
<table class="table table-bordered" style="font-size:11px;table-layout: fixed">
<tbody>
<!-- ngRepeat: frais in listeFrais -->
<tr >
<td style="text-align:center;width:168px;word-wrap: break-word" class="ng-binding">ALIMEA</td>
<td style="text-align:center;width:148px;word-wrap: break-word" class="ng-binding">Triage</td>
<td style="text-align:center;width:81px;word-wrap: break-word" class="ng-binding">2015-04-01</td>
...
<td style="text-align:center;width:58px;word-wrap: break-word" class="ng-binding">-50</td>
<td style="text-align:center;width:58px;word-wrap: break-word" class="ng-binding">0</td>
</tr>
<!-- end ngRepeat: frais in listeFrais -->
<tr>
<td style="text-align:center;width:168px;word-wrap: break-word" class="ng-binding">ALBA BIO COOP</td>
<td style="text-align:center;width:148px;word-wrap: break-word" class="ng-binding">Triage</td>
<td style="text-align:center;width:81px;word-wrap: break-word" class="ng-binding">2015-04-01</td>
...
<td style="text-align:center;width:98px;word-wrap: break-word" class="ng-binding">2</td>
<td style="text-align:center;width:58px;word-wrap: break-word" class="ng-binding">-20</td>
<td style="text-align:center;width:58px;word-wrap: break-word" class="ng-binding">0</td>
</tr>
<!-- end ngRepeat: frais in listeFrais -->
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>

Why table column width is changed?

<div id="reportContent">
<table id='insideTable5' border='1'>
<tr>
<th rowspan="2">Sensor Name</th>
<th rowspan="2">Senosr No</th>
<th colspan="9">Temperature</th>
<th colspan="9">Humidity</th>
</tr>
<tr>
<td>Min</td>
<td>Max</td>
<td>Mean</td>
<td>Spread</td>
<td>Count</td>
<td>LowRange</td>
<td><Low</td>
<td>HighRange</td>
<td> High</td>
<td>Min</td>
<td>Max</td>
<td>Mean</td>
<td>Spread</td>
<td>Count</td>
<td>LowRange</td>
<td><Low</td>
<td>HighRange</td>
<td> High</td>
</tr>
<script type="text/javascript">
var i=0;
for (i=0;i<=4;i++)
{
document.write('<tr class="even"><td>sensor1</td><td>0410-00370</td><td>19.5</td><td>24.0</td><td>21.6</td><td>4.5</td><td>48</td><td>Not Set</td><td>0</td><td>Not Set</td><td>0</td><td>19.5</td><td>24.0</td><td>21.6</td><td>4.5</td><td>48</td><td>Not Set</td><td>0</td><td>Not Set</td><td>0</td></tr>');
}
</script>
</table>
<br/>
<br/>
<table id='insideTable5' border='1'>
<tr>
<th rowspan="2">Sensor Name</th>
<th rowspan="2">Senosr No</th>
<th colspan="9">Temperature</th>
</tr>
<tr>
<td>Min</td>
<td>Max</td>
<td>Mean</td>
<td>Spread</td>
<td>Count</td>
<td>LowRange</td>
<td><Low</td>
<td>HighRange</td>
<td> High</td>
</tr>
<script type="text/javascript">
var i=0;
for (i=0;i<=3;i++)
{
document.write('<tr class="even"><td>sensor1</td><td>0410-00370</td><td>19.5</td><td>24.0</td><td>21.6</td><td>4.5</td><td>48</td><td>Not Set</td><td>0</td><td>Not Set</td><td>0</td></tr>');
}
</script>
</table>
</div>
Below is the output of the above code,
As seen from the image, the columns of "Sensor Name" have got the equal width for both tables.But once adding the following css, two tables have the different width for the "Sensor Name" column. My question is how to make "Sensor Name" columns having the same width after adding the following css.
<style type="text/css">
#reportContent{
width: 714px;
}
</style>
add css class to sensor column
<th rowspan="2" class="sensorName">Sensor Name</th>
<td>sensor1</td><td class="sensorName">
.sensorName{
width:100px;
}
Add this css:
table th:nth-child(1), table th:nth-child(2),
table td:nth-child(1), table td:nth-child(2)
{
white-space:nowrap;
}
jsFiddle example

Resources