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
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 have a bootstrap table, but I can't seem to get the text to align in the middle because the image expands the row.
I have tried adding vertical-align: middle to .table in my CSS, but it doesn't seem to do anything.
Example
https://jsfiddle.net/DTcHh/#&togetherjs=hy7S1lFDR3
<div class="container">
<h2>Hover Rows</h2>
<p>The .table-hover class enables a hover state on table rows:</p>
<table class="table table-hover">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
<th>Image</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john#example.com</td>
<td><img src="http://fullsoftwarepro.com/wp-content/uploads/2015/07/Radmin- server-and-viewer-3.5-Crack-License-key-Download.jpg" width=50></td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary#example.com</td>
<td><img src="http://fullsoftwarepro.com/wp-content/uploads/2015/07/Radmin- server-and-viewer-3.5-Crack-License-key-Download.jpg" width=50></td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#example.com</td>
<td><img src="http://fullsoftwarepro.com/wp-content/uploads/2015/07/Radmin-server-and-viewer-3.5-Crack-License-key-Download.jpg" width=50></td>
</tr>
</tbody>
</table>
</div>
Answer
Twitter Bootstrap have a CSS class called text-center, you can simply use this one, as shown below.
Try this:
CSS
.mid-align:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -0.25em;
}
HTML
<div class="container">
<h2>Hover Rows</h2>
<p>The .table-hover class enables a hover state on table rows:</p>
<table class="table table-hover text-center">
<thead>
<tr>
<th class="text-center">Firstname</th>
<th class="text-center">Lastname</th>
<th class="text-center">Email</th>
<th class="text-center">Image</th>
</tr>
</thead>
<tbody>
<tr>
<td class="mid-align">John</td>
<td class="mid-align">Doe</td>
<td class="mid-align">john#example.com</td>
<td><img src="http://fullsoftwarepro.com/wp-content/uploads/2015/07/Radmin-server-and-viewer-3.5-Crack-License-key-Download.jpg" width=50></td>
</tr>
<tr>
<td class="mid-align">Mary</td>
<td class="mid-align">Moe</td>
<td class="mid-align">mary#example.com</td>
<td><img src="http://fullsoftwarepro.com/wp-content/uploads/2015/07/Radmin-server-and-viewer-3.5-Crack-License-key-Download.jpg" width=50></td>
</tr>
<tr>
<td class="mid-align">July</td>
<td class="mid-align">Dooley</td>
<td class="mid-align">july#example.com</td>
<td><img src="http://fullsoftwarepro.com/wp-content/uploads/2015/07/Radmin-server-and-viewer-3.5-Crack-License-key-Download.jpg" width=50></td>
</tr>
</tbody>
</table>
</div>
As for specificity, declaring a style attribute inside a tag overwrites the style written in your *yourStyle*.css file, so in most cases it is not the best practice to declare the style inside the HTML element, but it is surely acceptable (just added a small note).
I'm trying to attribute an width for cells but it doesn't work. I used CSS to make it, since width is not supported in HTML5. In my problem I have a table with headers and inside that table I have another table with a scroll to show the results, I need to order the cell results by the headers attributing the same width as headers. Can someone help me?
Here's the fiddle . Thank you!
Here's what i've tried:
<table class="two">
<thead>
<tr>
<th style="width:150px">Tipo de Anúncio</th>
<th style="width:150px">Tipo de Imóvel</th>
<th style="width:150px">Localização</th>
<th style="width:150px">Mediador</th>
<th style="width:150px">Preço</th>
<th style="width:150px">Área</th>
</tr>
</thead>
<tbody class="scroll">
<tr>
<td colspan="2">
<div class="scroll">
<table>
<tr>
<td style="width:150px">January</td>
<td style="width:150px">$100</td>
<td style="width:150px">February</td>
<td style="width:150px">$80</td>
<td style="width:150px">February</td>
<td style="width:150px">$80</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
<td>February</td>
<td>$80</td>
<td>February</td>
<td>$80</td>
</tr>
<tr>
<td>January</td>
<td>$100</td>
<td>February</td>
<td>$80</td>
<td>February</td>
<td>$80</td>
</tr>
You have several problem in your layout but the main is not the width but the colspan : (thw width work right)
your th don't wrap all the column. If ypu have six column you need a colspan = 6
<tbody class="scroll">
<tr>
<td colspan="6">
I have touched only few element but ypou can see a preliminary result in this jsfiddle
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
I want create a table inside a table data. But i am seeing the gap between the outer table and inner table which i dont want. I am not able to attach the image
My Code:
<table class="clearfix sureIQTable scanoTable borderGray TableBottomBorder" id="softTissue">
<tr>
<th nowrap="nowrap" style= "width:1px; background-color: #88A4BB;"></th>
<th nowrap="nowrap" style="width:87px; background-color: #88A4BB;"></th>
<th class="textLeft" style="font-size:12px" colspan="17">
<span class="textLeft"><xsl:value-of select="ScanModeParam/comment"/></span>
</th>
</tr>
<tr>
<th class="textLeft" colspan="3" style="background-color: #88A4BB;vertical-align:top;font-size:15px;font-weight:normal; white-space: nowrap;"><img src="images/GG_Helical.png" alt=""/><br></br>
<td>
<table width="100%">
<tr >
<th class="textCenter width30px" style="font-size:14px;font-weight:bold">Start</th>
<th class="textCenter width100px" style="font-size:14px;font-weight:bold"><xsl:value-of select="ScanModeParam/StartTime/#DisplayName"/></th>
<th class="textCenter width100px" style="font-size:14px;font-weight:bold"><xsl:value-of select="ScanModeParam/WaitTime/#DisplayName"/></th>
<th class="textCenter width100px" style="font-size:14px;font-weight:bold">Start Position(mm)</th>
<th class="textCenter width100px" style="font-size:14px;font-weight:bold"><xsl:value-of select="ScanModeParam/Range/#DisplayName"/></th>
</tr>
</table>
</td>
</tr>
</table>
Could anyone please help me
Thanks
<table width="100%" border="0" cellpadding="0" cellspacing="0">
Can you try it?
To make no space between cells Use border-collapse: collapse;
For CSS
table{
border-collapse: collapse;
border-spacing: 0px; //It is for IE
}