Issue
I have this HTML table.
But I'm having an issue where the Column on the right (The nested table) doesn't take up the full height of the table.
I want it to resize even if the text in the description column is short as well. At the moment I've tried random things related to height but nothing seems to work.
The fulfillmentLine class is not taking up the full height of the column, can anyone let me know why this is happening please?
I would like something like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Table</title>
<style>
.innerTable {
padding: 0;
font-size: 20px;
}
.orderLine {
width: 130px;
padding: 3px;
border-left: 1px solid black;
border-bottom: 1px solid black;
}
.fulfillmentLine {
border-bottom: 1px solid black;
border-left: 1px solid black;
}
.fulfillmentLine td {
width: 50px;
height: 100px;
/* this */
border-right: 1px solid black;
}
.orderLineEnd {
border-left: 1px solid black;
}
.borderRight {
border-right: 1px solid black;
}
.orderLineHeader {
width: 130px;
padding: 3px;
border-left: 1px solid black;
border-top: 1px solid black;
border-bottom: 1px solid black;
}
.fulfillmentLineHeader {
width: 130px;
border-top: 1px solid black;
border-left: 1px solid black;
border-bottom: 1px solid black;
}
.fulfillmentLineHeader td {
border-top: 1px solid black;
border-right: 1px solid black;
text-align: center;
min-width: 45px;
}
.bottomBorder {
width: 100%;
height: 1px;
border-top: 1px solid black;
}
.itemName {
width: 300px;
}
</style>
</head>
<body>
<table class="bodySection o" cellpadding="0" cellspacing="0" border="0">
<tr class="orderHeaders">
<td class="orderLineHeader">Description</td>
<td class="fulfillmentLineHeader borderRight" align="center">
<table cellspacing="0" cellpadding="0" class="innerTable" border="0">
<td class="borderRightThick">ABC </td>
<td class="borderRightThick lightGreyRow">ABC</td>
<td class="borderRightThick">ABC</td>
</table>
</td>
</tr>
<tr style="page-break-inside : avoid">
<td class="orderLine itemName">Lorem ipsum loremLorem ipsum loremLorem ipsum Lorem ipsum loremLorem ipsum
loremLorem ipsum loremLorem ipsum loremLorem ipsum loremLorem ipsum loremLorem ipsum loremloremLorem
ipsum loremLorem ipsum lorem</b></td>
<td class="fulfillmentLine borderRight">
<table cellspacing="0" class="innerTable ">
<td></td>
<td></td>
<td></td>
</table>
</td>
</tr>
</table>
</div>
</table>
<br />
</body>
</html>
Solution
After some playing around, set the container (the < td >) to have position relative, and set the inner table to have position absolute. Also see any other tweaks are just as leftovers before arriving at the solution.
I color coded the inner table as gray and the container as blue, so to see any unfilled space. There isn't any. But without the absolute positioning, there is like the original problem.
<style>
.innerTable {
padding: 0;
font-size: 20px;
}
.orderLine {
width: 130px;
padding: 3px;
border-left: 1px solid black;
border-bottom: 1px solid black;
}
.fulfillmentLine {
border-bottom: 1px solid black;
border-left: 1px solid black;
}
.fulfillmentLine td {
width: 50px;
height: 100px;
/* this */
border-right: 1px solid black;
}
.orderLineEnd {
border-left: 1px solid black;
}
.borderRight {
border-right: 1px solid black;
}
.orderLineHeader {
width: 130px;
padding: 3px;
border-left: 1px solid black;
border-top: 1px solid black;
border-bottom: 1px solid black;
}
.fulfillmentLineHeader {
width: 130px;
border-top: 1px solid black;
border-left: 1px solid black;
border-bottom: 1px solid black;
}
.fulfillmentLineHeader td {
border-top: 1px solid black;
border-right: 1px solid black;
text-align: center;
min-width: 45px;
}
.bottomBorder {
width: 100%;
height: 1px;
border-top: 1px solid black;
}
.itemName {
width: 300px;
}
* {
padding:0px !important;
margin:0px !important;
}<body>
<table class="bodySection o" cellpadding=0 cellspacing=0 border=0>
<tr class="orderHeaders">
<td class="orderLineHeader">Description</td>
<td class="fulfillmentLineHeader borderRight" align="center">
<table cellspacing=0 cellpadding=0 class="innerTable" border=0>
<td class="borderRightThick">ABC </td>
<td class="borderRightThick lightGreyRow">ABC</td>
<td class="borderRightThick">ABC</td>
</table>
</td>
</tr>
<tr style="page-break-inside : avoid">
<td class="orderLine itemName">Lorem ipsum loremLorem ipsum loremLorem ipsum Lorem ipsum loremLorem ipsum
loremLorem ipsum loremLorem ipsum loremLorem ipsum loremLorem ipsum loremLorem ipsum loremloremLorem
ipsum loremLorem ipsum lorem</b></td>
<td class="fulfillmentLine borderRight" style="background:blue; height:100%; position:relative;">
<table cellspacing=0 cellpadding=0 class="innerTable" style="background:gainsboro; padding:0px; height:100%; position:absolute; left:0px; top:0px;">
<td>1</td>
<td>2</td>
<td>3</td>
</table>
</td>
</tr>
</table>
</div>
</table>
<br />
</body>
</html>Where I have the inline styles, just apply that to your classes if you prefer.
Answered By - GetSet
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.