I have created a html table as it is seen in the picture below, now I want the packing list cell to span five rows down. I have tried several ways but have not succeeded. Looks simple but its killing me, help guys!
Image link here of the Table
<TABLE border=1 style="width: 100%; border-collapse: collapse; border: 1px solid black;">
<colgroup>
<col style="width: 43%">
<col style="width: 11%">
<col style="width: 24%">
<col style="width: 35%">
</colgroup>
<THEAD>
<TR>
<TH rowspan="5"><b>ISSUER</b></TD>
<TH style="text-align:center" colspan="3" rowspan="5">PACKING LIST</TD>
</TR>
</THEAD>
<TR>
<td>
<p>Jonathan Vehicle Assemblers Limited</p>
<p>Plot 673 TA Industrial Park</p>
<p>Kibaha, Tanzania</p>
</td>
</TR>
<TR>
<td><b>TO:</b></td>
</TR>
<TR>
<td>
<p>Jifag Motors (T) Limited</p>
<p>Nyerere Road</p>
<p>P.O Box 40935402</p>
</td>
</TR>
<TR>
<td><b>LOCATION:</b></td>
</TR>
<TR>
<td rowspan="3">Assembly at Kibaha, Tanzania</td>
<td colspan="2"><b>PACKING LIST NO.:</b></td>
<td colspan="1"><b>DATE</b></td>
<TR>
<td colspan="2">GFA-PL-2020-00001</td>
<td>06-Nov-20</td>
</TR>
</TABLE>
table {
width: 100%;
border-collapse: collapse;
}
table, th, td {
border: 1px solid black;
}
<table>
<colgroup>
<col style="width: 43%">
<col style="width: 11%">
<col style="width: 24%">
<col style="width: 35%">
</colgroup>
<thead>
<tr>
<th rowspan="5"><b>ISSUER</b></th>
<th style="text-align:center" colspan="3" rowspan="5">PACKING LIST</th>
</tr>
</thead>
<tr>
<td>
<p>Jonathan Vehicle Assemblers Limited</p>
<p>Plot 673 TA Industrial Park</p>
<p>Kibaha, Tanzania</p>
</td>
<td rowspan="4" colspan="3"></td>
</tr>
<tr>
<td><b>TO:</b></td>
</tr>
<tr>
<td>
<p>Jifag Motors (T) Limited</p>
<p>Nyerere Road</p>
<p>P.O Box 40935402</p>
</td>
</tr>
<tr>
<td><b>LOCATION:</b></td>
</tr>
<tr>
<td rowspan="3">Assembly at Kibaha, Tanzania</td>
<td colspan="2"><b>PACKING LIST NO.:</b></td>
<td colspan="1"><b>DATE</b></td>
<tr>
<td colspan="2">GFA-PL-2020-00001</td>
<td>06-Nov-20</td>
</tr>
</table>
Related
I am trying to create a table where both rows are three cells. I want the first row to be 3 equal width cells, while the second row has 2 equal width cells (each 1/4 of the first row's cells) and a third cell that fills up the rest of the row.
Here is a picture of what I have now
I want to merge 3+4 in the top table, but when I actually merge them I get the second table.
Here is a fiddle that I have:
http://jsfiddle.net/9n3oyf2w/
<!-- This works: -->
<tr>
<td colspan="4">a</td>
<td colspan="2">b</td>
<td colspan="2">c</td>
</tr>
<tr>
<td colspan="1">1</td>
<td colspan="1">2</td>
<td colspan="1">3</td>
<td colspan="5">4</td>
</tr>
<!-- This doesn't work: -->
<tr>
<td colspan="4">a</td>
<td colspan="2">b</td>
<td colspan="2">c</td>
</tr>
<tr>
<td colspan="1">1</td>
<td colspan="1">2</td>
<td colspan="6">3+4</td>
</tr>
I have no clue what I am doing wrong but it has been driving me crazy. I've tried other combinations of colspans and some of them work while others don't.
EDIT:
New pic for what I am trying to achieve:
link
So you want something like this?
table, th, td{
padding: 0;
margin: 0;
border-collapse: collapse;
border:0;
border-spacing:0;
margin-left: auto;
margin-right: auto;
}
table.topInnerTable, table.topInnerTable td{
border: 1px solid black;
border-bottom: 0;
}
table.bottomInnerTable, table.bottomInnerTable td{
border: 1px solid black;
}
<table width="960px">
<tr>
<td>
<table class="topInnerTable" width="100%">
<colgroup>
<col width="320px">
<col width="320px">
<col width="320px">
</colgroup>
<tr>
<td>4</td>
<td>4</td>
<td>4</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table class="bottomInnerTable">
<tr>
<td width="80px">1</td>
<td width="80px">1</td>
<td width="800px">10</td>
</tr>
</table>
</td>
</tr>
</table>
I believe this is what you want
<table width="100%">
<tr>
<td colspan="3" width="33%">a</td>
<td width="33%">b</td>
<td width="33%">c</td>
</tr>
<tr>
<td width="10%">1</td>
<td width="10%">2</td>
<td colspan="3" width="80%">3+4</td>
</tr>
</table>
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>
I am creating a table but I am having trouble in the last panel (Condition). I want the table have 2 rows but I have tried and failed, how to create in a 2 row colum?
likely this image
I tried everything but could not, you can explain it to me
Thank a lot
<table id="items">
<tr>
<th width="25%">Prestation</th>
<th width="10%">Prix Unitaire</th>
<th width="10%">Quantity</th>
<th width="10%">Montant</th>
<th width="45%">Condition</th>
</tr>
<tr class="item-row">
<td class="item-name">
<div class="delete-wpr"><input type="text" style="width: px; height: 47px;"><a class="delete" href="javascript:;" title="Remove row">X</a></div>
</td>
<td><input type="text" class="cost" style="width: 100px; height: 47px;"></td>
<td><input type="text" class="qty" style="width: 60px; height: 47px;"></td>
<td><span class="price"></span></td>
<tr class="condition">
</tr>
<tr id="hiderow">
<td colspan="5"><a id="addrow" href="javascript:;" title="Add a row">Add a row</a></td>
</tr>
<tr>
<td colspan="1" class="blank"> </td>
<td colspan="2" class="total-line">Subtotal</td>
<td class="total-value">
<div id="subtotal"></div>
</td>
</tr>
<tr>
<td colspan="1" class="blank"> </td>
<td colspan="2" class="total-line">Total</td>
<td class="total-value">
<div id="total"></div>
</td>
</tr>
<tr>
<td colspan="1" class="blank"> </td>
<td colspan="2" class="total-line">Montant payé</td>
<td class="total-value"><input type="text" id="paid" style="width: 50px; heigth: ;"></td>
</tr>
<tr>
<td colspan="1" class="blank"> </td>
<td colspan="2" class="total-line balance">Solde dû</td>
<td class="total-value balance">
<div class="due"></div>
</td>
</tr>
</table>
I am not sure about your question. If you mean, have one column in 2 row, try use rowspan="2" in tag <row> instead of colspan.
Colspan will stretch one column through columns.
Rowspan will
stretch one row through rows.
The <colgroup> tag is useful for applying styles to entire columns, instead of repeating the styles for each cell, for each row.
I applied colgroup to my table by adding
<colgroup>
<col span="6" style="border-right: 1px solid #b7b7b7">
</colgroup>
below <table> tag.
So now all the cells have right border in all rows
but I need to delete border in specific cell.
How can I do that ?
.details-map:before{
content: '';
display: block;
height: 70px;
}
.details-map:after{
content: '';
display: block;
height: 50px;
}
.noborder{
border-right: 1px solid transparent;
border-bottom: 1px solid transparent;
}
.noborderall{
border-right: 1px solid transparent;
border-left: 1px solid transparent;
}
.noborderr{
border-right: 1px solid transparent;
}
<table class="table">
<colgroup>
<col span="6" style="border-right: 2px solid red">
</colgroup>
<thead>
<tr>
<th width="5.4%">Rank</th>
<th width="27.3%">School</th>
<th width="12.5%">Student to Faculty Ratio</th>
<th width="12.5%">Acceptance Rate</th>
<th width="11.3%">Graduation Rate</th>
<th width="12.3%">Median Debt Incurred</th>
<th width="31.2%">Median Earnings/Total Expense</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Lorem Ipsum Dolor</td>
<td>XX/1</td>
<td>XX%</td>
<td>XX%</td>
<td>$XX,XXX</td>
<td>$XX,XXX/$XX,XXX</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Lorem Ipsum Dolor</td>
<td>XX/1</td>
<td>XX%</td>
<td>XX%</td>
<td>$XX,XXX</td>
<td>$XX,XXX/$XX,XXX</td>
</tr>
</tbody>
<tbody class="details-map">
<tr>
<th scope="row" class="noborder"> </th>
<th scope="row" >Lorem Ipsum Dolor</th>
<th scope="row" class="noborderall"> </th>
<th scope="row" class="noborderr"> </th>
<td colspan="3" rowspan="7">
<button class="buttons">School website</button>
<button class="buttons">Financial Aid Office</button>
<button class="buttons">Prospecitve students</button>
<div id="googleMap"></div>
</td>
</tr>
<tr>
<td scope="row" class="noborder"> </td>
<td scope="row" >Expense Ratio</td>
<td scope="row" class="noborderall"> </td>
<td scope="row" class="noborderr right-align">XX/10</td>
</tr>
<tr>
<td scope="row" class="noborder"> </td>
<td scope="row" >Acceptance Rate Score</td>
<td scope="row" class="noborderall"> </td>
<td scope="row" class="noborderr right-align">XX/10</td>
</tr>
<tr>
<td scope="row" class="noborder"> </td>
<td scope="row" class="left-align">Graduation Rate Score</td>
<td scope="row" class="noborderall"> </td>
<td scope="row" class="noborderr right-align">XX/10</td>
</tr>
<tr>
<td scope="row" class="noborder"> </td>
<td scope="row" class="left-align">ROI/Value</td>
<td scope="row" class="noborderall"> </td>
<td scope="row" class="noborderr right-align">XX/10</td>
</tr>
<tr>
<td scope="row" class="noborder"> </td>
<td scope="row" >Student to Faculty Ratio</td>
<td scope="row" class="noborderall"> </td>
<td scope="row" class="noborderr right-align">XX/10</td>
</tr>
<tr>
<td colspan="4" scope="row" class="noborderr" >
<h2>About the scores</h2>
<p>
Using a complex algorithm our review tool examines all of the schools in Pennsylvania that offer Computer Science Majors and provides a score for several categories.
</p>
</td>
</tr>
</tbody>
<tbody>
<tr>
<th scope="row">3</th>
<td>Lorem Ipsum Dolor</td>
<td>XX/1</td>
<td>XX%</td>
<td>XX%</td>
<td>$XX,XXX</td>
<td>$XX,XXX/$XX,XXX</td>
</tr>
</tbody>
</table>
Padding doesn't work in tbody so I used before and after pseudo elements to add space. In this space I need to delete the border.
you can give an id or class to your choice of col (which should not have border) and add the border:none property to it
HTML :
<colgroup>
<col span="6" style="border-right: 1px solid #b7b7b7">
<col span="6" style="border-right: 1px solid #b7b7b7">
<col span="6" style="border-right: 1px solid #b7b7b7">
<col span="6" class="tb" style="border-right: 1px solid #b7b7b7">
</colgroup>
CSS :
.tb{
border:none;
}
I have created demo for remove specific cell border.
Demo Table Link
CSS
tr:nth-child(5) td:nth-child(2) {
border-right: hidden;
}
This question already has answers here:
Closed 11 years ago.
Possible Duplicate:
table cell width issue
I have a table set up as
<html>
<body bgcolor="#14B3D9">
<table width="100%" border="1" bgcolor="#ffffff">
<tr>
<td width="25%">25</td>
<td width="50%">50</td>
<td width="25%">25</td>
</tr>
<tr>
<td width="50%">50</td>
<td width="30%">30</td>
<td width="20%">20</td>
</tr>
</table>
</body>
</html>
How do i get the 2 rows to have different cell width?
One solution would be to divide your table into 20 columns of 5% width each, then use colspan on each real column to get the desired width, like this:
<html>
<body bgcolor="#14B3D9">
<table width="100%" border="1" bgcolor="#ffffff">
<colgroup>
<col width="5%"><col width="5%">
<col width="5%"><col width="5%">
<col width="5%"><col width="5%">
<col width="5%"><col width="5%">
<col width="5%"><col width="5%">
<col width="5%"><col width="5%">
<col width="5%"><col width="5%">
<col width="5%"><col width="5%">
<col width="5%"><col width="5%">
<col width="5%"><col width="5%">
</colgroup>
<tr>
<td colspan=5>25</td>
<td colspan=10>50</td>
<td colspan=5>25</td>
</tr>
<tr>
<td colspan=10>50</td>
<td colspan=6>30</td>
<td colspan=4>20</td>
</tr>
</table>
</body>
</html>
JSFIDDLE
As far as i know that is impossible and that makes sense since what you are trying to do is against the idea of tabular data presentation. You could however put the data in multiple tables and remove any padding and margins in between them to achieve the same result, at least visibly. Something along the lines of:
<html>
<head>
<style type="text/css">
.mytable {
border-collapse: collapse;
width: 100%;
background-color: white;
}
.mytable-head {
border: 1px solid black;
margin-bottom: 0;
padding-bottom: 0;
}
.mytable-head td {
border: 1px solid black;
}
.mytable-body {
border: 1px solid black;
border-top: 0;
margin-top: 0;
padding-top: 0;
margin-bottom: 0;
padding-bottom: 0;
}
.mytable-body td {
border: 1px solid black;
border-top: 0;
}
.mytable-footer {
border: 1px solid black;
border-top: 0;
margin-top: 0;
padding-top: 0;
}
.mytable-footer td {
border: 1px solid black;
border-top: 0;
}
</style>
</head>
<body>
<table class="mytable mytable-head">
<tr>
<td width="25%">25</td>
<td width="50%">50</td>
<td width="25%">25</td>
</tr>
</table>
<table class="mytable mytable-body">
<tr>
<td width="50%">50</td>
<td width="30%">30</td>
<td width="20%">20</td>
</tr>
</table>
<table class="mytable mytable-body">
<tr>
<td width="16%">16</td>
<td width="68%">68</td>
<td width="16%">16</td>
</tr>
</table>
<table class="mytable mytable-footer">
<tr>
<td width="20%">20</td>
<td width="30%">30</td>
<td width="50%">50</td>
</tr>
</table>
</body>
</html>
JSFIDDLE
I don't know your requirements but i'm sure there's a more elegant solution.
You can't have cells of arbitrarily different widths, this is generally a standard behaviour of tables from any space, e.g. Excel, otherwise it's no longer a table but just a list of text.
You can however have cells span multiple columns, such as:
<table>
<tr>
<td>25</td>
<td>50</td>
<td>25</td>
</tr>
<tr>
<td colspan="2">75</td>
<td>20</td>
</tr>
</table>
As an aside, you should avoid using style attributes like border and bgcolor and prefer CSS for those.
with 5 columns and colspan, this is possible (click here) (but doesn't make much sense to me):
<table width="100%" border="1" bgcolor="#ffffff">
<colgroup>
<col width="25%">
<col width="25%">
<col width="25%">
<col width="5%">
<col width="20%">
</colgroup>
<tr>
<td>25</td>
<td colspan="2">50</td>
<td colspan="2">25</td>
</tr>
<tr>
<td colspan="2">50</td>
<td colspan="2">30</td>
<td>20</td>
</tr>
</table>