I want to extend inner table cell width as per parent table header
I tried this but how do i give inner table cell width as per parent header cell.
What i tried along with boottrap
<div class="table-responsive">
<table class="table table-sm table-bordered block-table">
<thead>
<th>Sr.</th>
<th>Product</th>
<th>Unit</th>
<th style="width: 15%">Serial Number</th>
<th>Date</th>
<th>Mac. Address</th>
<th>Batch No.</th>
<th>Qty</th>
<th>Std Pkg</th>
<th>Start Range</th>
<!-- <th>Assigned Quantity</th> -->
</thead>
<tbody>
<ng-container *ngFor="let inventory of inventoryList;let i=index">
<tr style="cursor: pointer;" (click)="toggleProductEntryTable(i)">
<td>{{i + 1}} </td>
<td> {{inventory?.displayString}} </td>
<td>{{inventory?.uomString}} </td>
<td colspan="7" style="padding: 0px">
<tbody>
<tr style="display: table-header-group" *ngFor="let productEntry of inventory.inventories;let proEnt=index">
<td style="display: table-cell;min-width: 160px"> {{productEntry?.subDetail?.serialNo}} </td>
<td style="display: table-cell;"> {{productEntry?.inventory?.date}} </td>
<td style="display: table-cell;"> {{productEntry?.subDetail?.macAddress}} </td>
<td style="display: table-cell;"> {{productEntry?.subDetail?.batchNo}} </td>
<td style="display: table-cell;"> {{productEntry?.checkoutDetail?.consumed - productEntry?.checkoutDetail?.assignedCount}} </td>
<td style="display: table-cell;"> {{productEntry?.subDetail?.standardPackingQuntity}}</td>
<td style="display: table-cell;"> {{productEntry?.checkoutDetail?.startRange}} </td>
<td style="display: table-cell;"> {{productEntry?.checkoutDetail?.endRange}} </td>
</tr>
</tbody>
</td>
</tr>
</ng-container>
</tbody>
</table>
</div>
.block-table {
display: table;
overflow-x: scroll;
max-height: 448px;
margin-bottom: 0px;
}
Add colspan="2" with the number of columns you want it to span (looks like 10 in your case)
<!DOCTYPE html>
<html>
<head>
<style>
table,
th,
td {
border: 1px solid black;
}
</style>
</head>
<body>
<table>
<tr>
<th>Monthly Savings</th>
</tr>
<tr>
<td colspan="2">January</td>
</tr>
<tr>
<td colspan="2">February</td>
</tr>
</table>
</body>
</html>
Related
I am trying to print some tables and an image on two separate pages.
However when I do this I always get additional page that spills over into a 3rd page when I am trying to print.
How do I get rid of the additional page space or overflow that appears on a 3rd page when printing?
I have added page break after and before in the past in various places to remedy this with no success.
The tables will move in size due to data that is shoved in them - but never more than a page. So the image on the secopnd page needs to allow for that as well as keeping to the second page. I am struggling with this. I've tried using absolute position to get it to stay fixed, but it still moves when the table moves, pushing into a third page at times.
Any suggestions help. Thanks
HTML:
<body>
<table class="tableWrapper" cellpadding="3">
<tr class="no-counter">
<td>
<table class="table headingTable">
<tr class="no-counter">
<td>Total<br />Persons<br />Onboard</td>
<td> </td>
</tr>
</table>
</td>
<td>
<table class="table headingTable">
<tr class="no-counter">
<th colspan="4"> <#Tour_Resource type="lookup" value="resource_resource" display="resource_name"></th>
</tr>
<tr class="no-counter">
<td>Date</td>
<td><#Tour_Date_In format="ddd d mmm yyyy"></td>
<td>Wind Direction</td>
<td> </td>
</tr>
<tr class="no-counter">
<td>Dept Time</td>
<td><#Tour_Date_In format="h:nn am/pm"></td>
<td>Wind Strength</td>
<td></td>
</tr>
<tr class="no-counter">
<td>Ret Time</td>
<td></td>
<td>Swell/Waves</td>
<td></td>
</tr>
<tr class="no-counter">
<td>Dive Site</td>
<td>
<#Tour_TourTemp type="lookup" value="tourtemp_tourtemp" display="tourtemp_name">
</td>
<td>Tide</td>
<td></td>
</tr>
</table>
</td>
<td>
<table class="table headingTable">
<tr class="no-counter">
<th colspan="2">Dive Plan / Skipper</th>
</tr>
<tr class="no-counter">
<td>Planned Total Dive Time</td>
<td style="text-align:right;">min</td>
</tr>
<tr class="no-counter">
<td>Time in (first dive)</td>
<td style="text-align: center;">:</td>
</tr>
<tr class="no-counter">
<td>Time out (last dive)</td>
<td style="text-align: center;">:</td>
</tr>
<tr class="no-counter">
<td>Master/Skipper</td>
<td> </td>
</tr>
</table>
</td>
<td>
<table class="table headingTable">
<tr class="no-counter">
<th colspan="2">Boat Crew</th>
</tr>
<tr class="no-counter">
<td nowrap>G.P Crew 1</td>
<td> </td>
</tr>
<tr class="no-counter">
<td nowrap>G.P Crew 2</td>
<td></td>
</tr>
<tr class="no-counter">
<td nowrap>G.P Crew 3</td>
<td></td>
</tr>
<tr class="no-counter">
<td nowrap>G.P Crew 4</td>
<td></td>
</tr>
</table>
</td>
<td>
<table class="table headingTable">
<tr class="no-counter">
<th colspan="4">Passenger Count</th>
</tr>
<tr class="no-counter">
<td colspan="2">Before Departure</td>
<td colspan="2">Before Return</td>
</tr>
<tr class="no-counter">
<td>Divers</td>
<td> </td>
<td>Divers</td>
<td> </td>
</tr>
<tr class="no-counter">
<td>Non Divers</td>
<td> </td>
<td>Non Divers</td>
<td> </td>
</tr>
<tr class="no-counter">
<td>Signed</td>
<td> </td>
<td>Signed</td>
<td> </td>
</tr>
</table>
</td>
<td>
<table class="table headingTable">
<tr class="no-counter">
<th colspan="2">Checks</th>
</tr>
<tr class="no-counter">
<td>Air On & Checked</td>
<td style="text-align: center;"><input type="checkbox"></td>
</tr>
<tr class="no-counter">
<td>BCDs Connected?</td>
<td style="text-align: center;"><input type="checkbox"></td>
</tr>
<tr class="no-counter">
<td>BCDs Inflate?</td>
<td style="text-align: center;"><input type="checkbox"></td>
</tr>
<tr class="no-counter">
<td>Signed</td>
<td> </td>
</tr>
</table>
</td>
</tr>
</table>
<br />
<table class="table service-cart">
<tr class="no-counter">
<th>#</th>
<th style="margin:0; padding: 0;">Buddy<br/>Group</th>
<th>Name</th>
<th>Booked</th>
<th>Loc</th>
<th>Last Dive</th>
<th>Air Full</th>
<th>Plan<br/>Depth</th>
<th>Plan<br/>Bottom<br/>Time</th>
<th>Safety<br/>Stop<br/>Time</th>
<th style="padding-left: 5px; padding-right: 5px;">Total<br/>Time</th>
<th style="padding-left: 6px; padding-right: 6px;">Gas<br/>Mix</th>
<th>M.O.D.</th>
<th style="padding-left: 5px; padding-right: 5px;">In<br/>Time</th>
<th style="padding-left: 5px; padding-right: 5px;">Out<br/>Time</th>
<th>Actual<br/>Depth</th>
<th>Actual<br/>Run<br/>Time</th>
<th>Stops<br/>Cmpld</th>
<th style="padding-left: 40px; padding-right: 40px; text-align: left;">Sign for<br/>- Dive Parameters Done<br />- Returned Onboard</th>
</tr>
<#Reference filter="reference_status = 'A'" order="Guest_surname">
<tr style="background-color: #ffffff;">
<td> </td>
<td> </td>
<td class="text-left"><input type="checkbox"></td>
<td> </td>
<td> </td>
<td> </td>
<td class="text-center"><input type="checkbox"></td>
<td style="text-align:right;">M</td>
<td> </td>
<td> </td>
<td> </td>
<td style="text-align:right;">%</td>
<td style="text-align:right;">M</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td class="text-center"><input type="checkbox"></td>
<td> </td>
</tr>
<tr style="background-color: #ffffff;">
<td> </td>
<td> </td>
<td class="text-left"><input type="checkbox"></td>
<td> </td>
<td> </td>
<td> </td>
<td class="text-center"><input type="checkbox"></td>
<td style="text-align:right;">M</td>
<td> </td>
<td> </td>
<td> </td>
<td style="text-align:right;">%</td>
<td style="text-align:right;">M</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td class="text-center"><input type="checkbox"></td>
<td> </td>
</tr>
</table>
<hr class="break">
<div class="second">
<img src="/vessellog.png" class="dlog">
</div>
</body>
</html>
CSS:
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="styletable.css">
<style>
table tbody tr:not(.no-counter) {
counter-increment: rowNumber;
}
table tbody tr:not(.no-counter) td:nth-child(1)::before {
content: counter(rowNumber);
min-width: 1em;
margin-right: 0.5em;
}
.headingTable {
height: 150px;
font-size: 12px;
width: 100%;
}
.tableWrapper {
width: 100%;
border-collapse: collapse;
}
.second {
transform: rotate(270deg);
margin-left: 180px;
margin-top: -60px;
width: 720px;
height: 1080px;
position: absolute;
}
.dlog {
max-width: 100%;
max-height: 100%;
}
.break {
page-break-after: always;
}
</style>
</head>
To solve my issue what I did was add: <div style="page-break-before:always;"> </div> after the last <table> on first page. This created the page break I needed to print on separate pages. As in:
</table> /* End of First Page */
<div style="page-break-before: always;"> </div>
<div class="vlogimage"> /*Second Page*/
<img class="logologext" alt='<#Business_name>' src= "<#servername>/<#Register_Directory>/<#Splash_Logo>?v=<#now format='yy-mm-dd-hh-nn'>">
<p class="vlogtext"><#Business_name> Daily Vessel Log</p>
<img src="/vessellog.png" class="dlog" >
</div>
I tried applying page-break-before: always; to the first <div> on my second page and this did not work how I was hoping.
Hope this helps someone out there!
I have made two tables, one of which does not fill the full width of the parent div.
Does anyone have a clue what's wrong? You will find below the JS fiddle code:
https://jsfiddle.net/factorbased/cps3Loa2/6
The issue seems to involve this part but I don't understand how to fix it:
<head>
<style>
table.ReturnsTable {
text-align: right;
width: 100%;
}
.tr_grey{background-color:#C0C0C0;}
.setheight{min-height: 100px; overflow: hidden;}
#pies3 div{float:left;}
#pies4 div{float:left;}
</style>
</head>
<body>
<div id="csvBar12" style="display: none;">
[wbcr_php_snippet id="972"]
</div>
<div id="pies3" class="setheight" width="100%">
<div id="chartdiv3" style="width: 500px; height: 300px; background-color: #FFFFFF;" ></div>
<div><table class="ReturnsTable" border="2">
<tr class="tr_grey"><td>Performance Statistics</td> <td>Portfolio</td> <td>Benchmark</td> <td>Difference</td> </tr>
<tr> <td>3-Month Return (%)</td> <td id="b0"></td> <td id="b1"></td><td id="b2"></td> </tr>
<tr> <td>1-Year Return (%)</td> <td id="b3"></td> <td id="b4"></td> <td id="b5"></td> </tr>
<tr> <td>3-Year Return (%)</td> <td id="b6"></td> <td id="b7"></td><td id="b8"></td></tr>
<tr> <td>5-Year Return (%)</td> <td id="b9"></td> <td id="b10"></td> <td id="b11"></td> </tr>
</table></div>
</div>
<div id="pies4" class="setheight" width="100%">
<div id="chartdiv4" style="width: 500px; height: 300px; background-color: #FFFFFF;" ></div>
<div><table class="ReturnsTable" border="2">
<tr class="tr_grey"><td>Risk Measurements</td> <td>Portfolio</td> <td>Benchmark</td> <td>Difference</td> </tr>
<tr> <td>Standard Deviation (%)</td> <td id="b12"></td> <td id="b13"></td><td id="b14" ></td> </tr>
<tr> <td>Maximum Drawdown (%)</td> <td id="b15" ></td> <td id="b16" ></td> <td id="b17"></td> </tr>
<tr> <td>Sharpe Ratio</td> <td id="b18"></td> <td id="b19"></td><td id="b20"></td></tr>
<tr> <td>Index Correlation</td> <td id="b21"></td> <td id="b22"></td> <td id="b23"></td> </tr>
</table></div>
</div>
</body>
Many thanks,
I have table:
<table border="1" width="100%">
<thead>
<tr>
<th width="50%">Name</th>
<th width="50%"><span style="width: 50%;text-align: left;">Price</span> / <span style="width: 50%;text-align: right;">Einheit</span></th>
</tr>
</thead>
<tbody>
<tr>
<td>Name1</td>
<td><span style="width: 50%;text-align: left;">1000</span> / <span style="width: 50%;text-align: right;">Hour</span></td>
</tr>
<tr>
<td>Name2</td>
<td><span style="width: 50%;text-align: left;">250.50</span> / <span style="width: 50%;text-align: right;">Day</span></td>
</tr>
</tbody>
</table>
Need that 1000 and 250.50 were under the word Price, Hour and Day were under the word Einheit. I tried do it using width property and text-align but it doesnt work.
Need this result, for example:
https://clip2net.com/s/3ZXsphT
Thanks
By Default span tag is inline element, it doesn't take width. You need to change span tag to block label element using display or float. check updated snippet below...
td span {
display: inline-block;
width: 47%;
}
<table border="1" width="100%">
<thead>
<tr>
<th width="50%">Name</th>
<th width="50%"><span style="width: 50%;text-align: left;">Price</span> / <span style="width: 50%;text-align: right;">Einheit</span></th>
</tr>
</thead>
<tbody>
<tr>
<td>Name1</td>
<td><span style="text-align: right;">1000</span> / <span style="text-align: left;">Hour</span></td>
</tr>
<tr>
<td>Name2</td>
<td><span style="text-align: right;">250.50</span> / <span style="text-align: left;">Day</span></td>
</tr>
</tbody>
Add this CSS
table tr td:nth-child(even){
text-align:center;
}
<table border="1" width="100%">
<thead>
<tr>
<th width="50%">Name</th>
<th width="50%"><span>Price</span> / <span>Einheit</span></th>
</tr>
</thead>
<tbody>
<tr>
<td>Name1</td>
<td><span>1000</span> / <span>Hour</span></td>
</tr>
<tr>
<td>Name2</td>
<td><span>250.50</span> / <span>Day</span></td>
</tr>
</tbody>
</table>
Actually, you don't need any single span as none was executed.
price / Einheit was centered only as this is the default of th tag
So, in order to align the cell beneath it, you can just code td style=" text-align:center"
and if you want to align all cells to the center
table style="text-align:center"
I have a simple html table where i am trying to get the body to extend to the end of the headers/table. I need it to have horizontal scroll only for the body and have fixed headers.
I have a fiddle here that shows the issue.
http://jsfiddle.net/ZbdZe/54/
<table border="1" width="100%">
<thead >
<tr>
<th id="th1" width="50%">first</th>
<th id="th2" width="50%" >last</th>
</tr>
</thead>
<tbody style="display: block; border: 1px solid green; height: 530px; overflow-y: scroll">
<tr>
<td headers="th1" >Hello</td>
<td headers="th2" >World</td>
</tr>
</tbody>
</table>
Right now it extendes only the first heading. I need it to extend the full width of the table with scroll. Thank you
This is to have fixed table header created by another table
Second table for the body of the table with scroll
table{
border-collapse:collapse;
width:100%
}
tbody{
border: 1px solid green;
table-layout: fixed;
}
div{
height: 66px; /*adjust table body*/
overflow-y: scroll
}
<table border="1">
<thead>
<tr>
<th id="th1" width="39%">first</th>
<th id="th2" width="50%" >last</th>
</tr>
</thead>
</table>
<div>
<table border=1>
<tbody>
<tr>
<td headers="th1" >Hello</td>
<td headers="th2" >World</td>
</tr>
<tr>
<td headers="th1" >Hello</td>
<td headers="th2" >World</td>
</tr>
<tr>
<td headers="th1" >Hello</td>
<td headers="th2" >World</td>
</tr>
<tr>
<td headers="th1" >Hello</td>
<td headers="th2" >World</td>
</tr>
</tbody>
</table>
</div>
I have a simple table structure.
table > tbody > tr > td{
text-align:center;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.css" rel="stylesheet"/>
<table class="table table-hover">
<thead>
<tr>
<td>Client</td>
</tr>
</thead>
<tbody>
<tr>
<td class="col-md-4">
C 1
</td>
</tr>
<tr>
<td class="col-md-4">
Client 2
</td>
</tr>
</tbody>
</table>
The question is : How can I align td-s content left and center. ?
The output should be something like this :
If you are wanting the lower cells to be left justified from the centre, then just add padding-left 50% to your body cells
.table tbody td {
padding-left: 50%;
text-align;
left;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.css" rel="stylesheet" />
<table class="table table-hover">
<thead>
<tr>
<td>Client</td>
</tr>
</thead>
<tbody>
<tr>
<td class="col-md-4">
C 1
</td>
</tr>
<tr>
<td class="col-md-4">
Client 2
</td>
</tr>
</tbody>
</table>
If you want them centred to the largest word, then left-aligned, you cannot have separate rows for the tbody, you would need to wrap all the words in an inline block div:
.col-md-4 {
text-align: center;
}
.inline-block {
display: inline-block;
text-align: left;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.css" rel="stylesheet" />
<table class="table table-hover">
<thead>
<tr>
<td>Client</td>
</tr>
</thead>
<tbody>
<tr>
<td class="col-md-4">
<div class="inline-block">
C 1<br> Client 2
</div>
</td>
</tr>
</tbody>
</table>
Try this:
td {
width: 50%;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.css" rel="stylesheet"/>
<table class="table table-hover">
<thead>
<tr>
<td>Client</td>
<td></td>
</tr>
</thead>
<tbody>
<tr>
<td>
</td>
<td>
C 1
</td>
</tr>
<tr>
<td>
</td>
<td>
Client 2
</td>
</tr>
</tbody>
</table>
If you can't add extra table-cells you could use padding:
.table tbody td {
padding-left: 50%;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.css" rel="stylesheet"/>
<table class="table table-hover">
<thead>
<tr>
<td>Client</td>
</tr>
</thead>
<tbody>
<tr>
<td>
C 1
</td>
</tr>
<tr>
<td>
Client 2
</td>
</tr>
</tbody>
</table>
td {
width: 50%;
}
td:last-child {
border-left:1px solid #333;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.css" rel="stylesheet"/>
<table class="table table-hover">
<thead>
<tr>
<td>Client</td>
<td></td>
</tr>
</thead>
<tbody>
<tr>
<td>
</td>
<td>
C 1
</td>
</tr>
<tr>
<td>
</td>
<td>
Client 2
</td>
</tr>
</tbody>
</table>
Try colspan="<number of columns to merge>" and rowspan="<number of rows to merge>" to merge row or column:
<table>
<thead>
<tr>
<td colspan="2" align="center">Client</td>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2" width="50%"></td>
<td>
C 1
</td>
</tr>
<tr>
<td>
Client 2
</td>
</tr>
</tbody>
</table>