I need to change the size of warranty table that is nested inside one of the td's of the other table, but I cannot change its size by changing height or width. What do I do?
Here is the code but if you want a simplified explaination I have a table that is inside the of another table and I am trying to resize it.
<div >
<div style="background: linear-gradient(to left, rgb(187, 230, 241), rgb(228, 245, 249));">
<div ><span id="ticket_label_ticket_num">Ticket #: </span><span id="ticket_header_ticket_num">01097P6YRXW</span></div>
<div ><span >Final Date: </span><span >10/03/2017</span></div>
<div ><span >Order Type: </span><span >SAL</span></div>
<div ><span >Status Code: </span><span >F</span></div>
<div ><span >HFC: </span> <span >P35</span></div>
</div>
<div ></div>
<div>
<div ></div>
<table id="QuickTable" style="margin: 0px;">
<thead>
<tr>
<th data-align="auto">
<div style="display: flex;">
<div>SKU</div>
</div>
</th>
<th data-align="auto">
<div style="display: flex;">
<div>VE CD</div>
</div>
</th>
<th data-align="auto">
<div style="display: flex;">
<div>Vendor Stock Number</div>
</div>
</th>
<th data-align="auto">
<div style="display: flex;">
<div>Description</div>
</div>
</th>
<th data-align="auto">
<div style="display: flex;">
<div>Av. Cr.</div>
</div>
</th>
<th data-align="auto">
<div style="display: flex;">
<div>Qty</div>
</div>
</th>
<th data-align="auto">
<div style="display: flex;">
<div>Ser Qty</div>
</div>
</th>
</tr>
</thead>
<tbody>
<tr data-even="true">
<td style="background: white;">
<div><span >399054801</span><span style="display: block;">SO Line Comment:</span><textarea type="text" maxlength="70" placeholder="70 characters"></textarea></div>
</td>
<td style="background: white;">GOAK</td>
<td style="background: white;">HGXLGTD</td>
<td style="background: white;">
<div>
<div>
<div>
<span >Warranty Information:</span>
<table >
<th >Upholstery:</th>
<th >Frame</th>
<th >Spring</th>
<th >Mechs</th>
<th >Cores</th>
<th >Mattresses</th>
<th >Fabric</th>
<th >Leather</th>
<tr>
<td></td>
<td>2yr</td>
<td>2yr</td>
<td>life</td>
<td>5yr</td>
<td>N/A</td>
<td>1yr</td>
<td>5yr</td>
</tr>
<th >Case Goods</th>
<th >Frame</th>
<th >Spring</th>
<th >Mechs</th>
<th >Cores</th>
<th >Mattresses</th>
<th >Fabric</th>
<th >Leather</th>
<tr>
<td></td>
<td>2yr</td>
<td>2yr</td>
<td>life</td>
<td>5yr</td>
<td>N/A</td>
<td>1yr</td>
<td>5yr</td>
</tr>
</table>
</div>
</div>
</div>
</td>
<td style="background: white;">
<div></div>
</td>
<td style="background: white;">1</td>
<td style="background: white;">
<div><span data-isdis="true"><input disabled="" data-finaldate="10/03/2017" data-purchaseqty="1" data-sku="399054801" data-del="01097P6YRXW" type="number"></span></div>
</td>
</tr>
<tr data-odd="true">
<td style="background: white;">
<div><span >364054800</span><span style="display: block;">SO Line Comment:</span><textarea type="text" maxlength="70" placeholder="70 characters"></textarea></div>
</td>
<td style="background: white;">GOAK</td>
<td style="background: white;">XLGTD54H-8P BROOKS (F.D.)</td>
<td style="background: white;">
<div>
<div>
<div>
<span >Warranty Information:</span>
<table >
<th >Upholstery:</th>
<th >Frame</th>
<th >Spring</th>
<th >Mechs</th>
<th >Cores</th>
<th >Mattresses</th>
<th >Fabric</th>
<th >Leather</th>
<tr>
<td></td>
<td>2yr</td>
<td>2yr</td>
<td>life</td>
<td>5yr</td>
<td>N/A</td>
<td>1yr</td>
<td>5yr</td>
</tr>
<th >Case Goods</th>
<th >Frame</th>
<th >Spring</th>
<th >Mechs</th>
<th >Cores</th>
<th >Mattresses</th>
<th >Fabric</th>
<th >Leather</th>
<tr>
<td></td>
<td>2yr</td>
<td>2yr</td>
<td>life</td>
<td>5yr</td>
<td>N/A</td>
<td>1yr</td>
<td>5yr</td>
</tr>
</table>
</div>
</div>
</div>
</td>
<td style="background: white;">
<div></div>
</td>
<td style="background: white;">1</td>
<td style="background: white;">
<div><span data-isdis="false"><input data-finaldate="10/03/2017" data-purchaseqty="1" data-sku="364054800" data-del="01097P6YRXW" type="number"></span></div>
</td>
</tr>
<tr data-even="true">
<td style="background: white;">
<div><span >365054801</span><span style="display: block;">SO Line Comment:</span><textarea type="text" maxlength="70" placeholder="70 characters"></textarea></div>
</td>
<td style="background: white;">GOAK</td>
<td style="background: white;">ATD60H-8P (F.D.)</td>
<td style="background: white;">
<div>
<div>
<div>
<span >Warranty Information:</span>
<table >
<th >Upholstery:</th>
<th >Frame</th>
<th >Spring</th>
<th >Mechs</th>
<th >Cores</th>
<th >Mattresses</th>
<th >Fabric</th>
<th >Leather</th>
<tr>
<td></td>
<td>2yr</td>
<td>2yr</td>
<td>life</td>
<td>5yr</td>
<td>N/A</td>
<td>1yr</td>
<td>5yr</td>
</tr>
<th >Case Goods</th>
<th >Frame</th>
<th >Spring</th>
<th >Mechs</th>
<th >Cores</th>
<th >Mattresses</th>
<th >Fabric</th>
<th >Leather</th>
<tr>
<td></td>
<td>2yr</td>
<td>2yr</td>
<td>life</td>
<td>5yr</td>
<td>N/A</td>
<td>1yr</td>
<td>5yr</td>
</tr>
</table>
</div>
</div>
</div>
</td>
<td style="background: white;">
<div></div>
</td>
<td style="background: white;">1</td>
<td style="background: white;">
<div><span data-isdis="false"><input data-finaldate="10/03/2017" data-purchaseqty="1" data-sku="365054801" data-del="01097P6YRXW" type="number"></span></div>
</td>
</tr>
<tr data-odd="true">
<td style="background: white;">
<div><span >365054801</span><span style="display: block;">SO Line Comment:</span><textarea type="text" maxlength="70" placeholder="70 characters"></textarea></div>
</td>
<td style="background: white;">GOAK</td>
<td style="background: white;">ATD60H-8P (F.D.)</td>
<td style="background: white;">
<div>
<div>
<div>
<span >Warranty Information:</span>
<table >
<th >Upholstery:</th>
<th >Frame</th>
<th >Spring</th>
<th >Mechs</th>
<th >Cores</th>
<th >Mattresses</th>
<th >Fabric</th>
<th >Leather</th>
<tr>
<td></td>
<td>2yr</td>
<td>2yr</td>
<td>life</td>
<td>5yr</td>
<td>N/A</td>
<td>1yr</td>
<td>5yr</td>
</tr>
<th >Case Goods</th>
<th >Frame</th>
<th >Spring</th>
<th >Mechs</th>
<th >Cores</th>
<th >Mattresses</th>
<th >Fabric</th>
<th >Leather</th>
<tr>
<td></td>
<td>2yr</td>
<td>2yr</td>
<td>life</td>
<td>5yr</td>
<td>N/A</td>
<td>1yr</td>
<td>5yr</td>
</tr>
</table>
</div>
</div>
</div>
</td>
<td style="background: white;">
<div></div>
</td>
<td style="background: white;">1</td>
<td style="background: white;">
<div><span data-isdis="false"><input data-finaldate="10/03/2017" data-purchaseqty="1" data-sku="365054801" data-del="01097P6YRXW" type="number"></span></div>
</td>
</tr>
<tr data-even="true">
<td style="background: white;">
<div><span >202239352</span><span style="display: block;">SO Line Comment:</span><textarea type="text" maxlength="70" placeholder="70 characters"></textarea></div>
</td>
<td style="background: white;">RF14</td>
<td style="background: white;">393-52PWR STYLUS</td>
<td style="background: white;">
<div>
<div>
<div>
<span >Warranty Information:</span>
<table >
<th >Upholstery:</th>
<th >Frame</th>
<th >Spring</th>
<th >Mechs</th>
<th >Cores</th>
<th >Mattresses</th>
<th >Fabric</th>
<th >Leather</th>
<tr>
<td></td>
<td>2yr</td>
<td>2yr</td>
<td>life</td>
<td>5yr</td>
<td>N/A</td>
<td>1yr</td>
<td>5yr</td>
</tr>
<th >Case Goods</th>
<th >Frame</th>
<th >Spring</th>
<th >Mechs</th>
<th >Cores</th>
<th >Mattresses</th>
<th >Fabric</th>
<th >Leather</th>
<tr>
<td></td>
<td>2yr</td>
<td>2yr</td>
<td>life</td>
<td>5yr</td>
<td>N/A</td>
<td>1yr</td>
<td>5yr</td>
</tr>
</table>
</div>
</div>
</div>
</td>
<td style="background: white;">
<div></div>
</td>
<td style="background: white;">2</td>
<td style="background: white;">
<div><span data-isdis="false"><input data-finaldate="10/03/2017" data-purchaseqty="2" data-sku="202239352" data-del="01097P6YRXW" type="number"></span></div>
</td>
</tr>
</tbody>
</table>
</div>
</div>CodePudding user response：
add style ='width:1000px' inside or add witdth:1000px to your css class named warranty_table.
The result should look like this
<div >
<div style="background: linear-gradient(to left, rgb(187, 230, 241), rgb(228, 245, 249));">
<div ><span id="ticket_label_ticket_num">Ticket #: </span><span id="ticket_header_ticket_num">01097P6YRXW</span></div>
<div ><span >Final Date: </span><span >10/03/2017</span></div>
<div ><span >Order Type: </span><span >SAL</span></div>
<div ><span >Status Code: </span><span >F</span></div>
<div ><span >HFC: </span> <span >P35</span></div>
</div>
<div ></div>
<div>
<div ></div>
<table id="QuickTable" style="margin: 0px;">
<thead>
<tr>
<th data-align="auto">
<div style="display: flex;">
<div>SKU</div>
</div>
</th>
<th data-align="auto">
<div style="display: flex;">
<div>VE CD</div>
</div>
</th>
<th data-align="auto">
<div style="display: flex;">
<div>Vendor Stock Number</div>
</div>
</th>
<th data-align="auto">
<div style="display: flex;">
<div>Description</div>
</div>
</th>
<th data-align="auto">
<div style="display: flex;">
<div>Av. Cr.</div>
</div>
</th>
<th data-align="auto">
<div style="display: flex;">
<div>Qty</div>
</div>
</th>
<th data-align="auto">
<div style="display: flex;">
<div>Ser Qty</div>
</div>
</th>
</tr>
</thead>
<tbody>
<tr data-even="true">
<td style="background: white;">
<div><span >399054801</span><span style="display: block;">SO Line Comment:</span><textarea type="text" maxlength="70" placeholder="70 characters"></textarea></div>
</td>
<td style="background: white;">GOAK</td>
<td style="background: white;">HGXLGTD</td>
<td style="background: white;">
<div>
<div>
<div>
<span >Warranty Information:</span>
<table style='width:1000px;'>
<th >Upholstery:</th>
<th >Frame</th>
<th >Spring</th>
<th >Mechs</th>
<th >Cores</th>
<th >Mattresses</th>
<th >Fabric</th>
<th >Leather</th>
<tr>
<td></td>
<td>2yr</td>
<td>2yr</td>
<td>life</td>
<td>5yr</td>
<td>N/A</td>
<td>1yr</td>
<td>5yr</td>
</tr>
<th >Case Goods</th>
<th >Frame</th>
<th >Spring</th>
<th >Mechs</th>
<th >Cores</th>
<th >Mattresses</th>
<th >Fabric</th>
<th >Leather</th>
<tr>
<td></td>
<td>2yr</td>
<td>2yr</td>
<td>life</td>
<td>5yr</td>
<td>N/A</td>
<td>1yr</td>
<td>5yr</td>
</tr>
</table>
</div>
</div>
</div>
</td>
<td style="background: white;">
<div></div>
</td>
<td style="background: white;">1</td>
<td style="background: white;">
<div><span data-isdis="true"><input disabled="" data-finaldate="10/03/2017" data-purchaseqty="1" data-sku="399054801" data-del="01097P6YRXW" type="number"></span></div>
</td>
</tr>
<tr data-odd="true">
<td style="background: white;">
<div><span >364054800</span><span style="display: block;">SO Line Comment:</span><textarea type="text" maxlength="70" placeholder="70 characters"></textarea></div>
</td>
<td style="background: white;">GOAK</td>
<td style="background: white;">XLGTD54H-8P BROOKS (F.D.)</td>
<td style="background: white;">
<div>
<div>
<div>
<span >Warranty Information:</span>
<table style='width:1000px;>
<th >Upholstery:</th>
<th >Frame</th>
<th >Spring</th>
<th >Mechs</th>
<th >Cores</th>
<th >Mattresses</th>
<th >Fabric</th>
<th >Leather</th>
<tr>
<td></td>
<td>2yr</td>
<td>2yr</td>
<td>life</td>
<td>5yr</td>
<td>N/A</td>
<td>1yr</td>
<td>5yr</td>
</tr>
<th >Case Goods</th>
<th >Frame</th>
<th >Spring</th>
<th >Mechs</th>
<th >Cores</th>
<th >Mattresses</th>
<th >Fabric</th>
<th >Leather</th>
<tr>
<td></td>
<td>2yr</td>
<td>2yr</td>
<td>life</td>
<td>5yr</td>
<td>N/A</td>
<td>1yr</td>
<td>5yr</td>
</tr>
</table>
</div>
</div>
</div>
</td>
<td style="background: white;">
<div></div>
</td>
<td style="background: white;">1</td>
<td style="background: white;">
<div><span data-isdis="false"><input data-finaldate="10/03/2017" data-purchaseqty="1" data-sku="364054800" data-del="01097P6YRXW" type="number"></span></div>
</td>
</tr>
<tr data-even="true">
<td style="background: white;">
<div><span >365054801</span><span style="display: block;">SO Line Comment:</span><textarea type="text" maxlength="70" placeholder="70 characters"></textarea></div>
</td>
<td style="background: white;">GOAK</td>
<td style="background: white;">ATD60H-8P (F.D.)</td>
<td style="background: white;">
<div>
<div>
<div>
<span >Warranty Information:</span>
<table style='width:1000px;>
<th >Upholstery:</th>
<th >Frame</th>
<th >Spring</th>
<th >Mechs</th>
<th >Cores</th>
<th >Mattresses</th>
<th >Fabric</th>
<th >Leather</th>
<tr>
<td></td>
<td>2yr</td>
<td>2yr</td>
<td>life</td>
<td>5yr</td>
<td>N/A</td>
<td>1yr</td>
<td>5yr</td>
</tr>
<th >Case Goods</th>
<th >Frame</th>
<th >Spring</th>
<th >Mechs</th>
<th >Cores</th>
<th >Mattresses</th>
<th >Fabric</th>
<th >Leather</th>
<tr>
<td></td>
<td>2yr</td>
<td>2yr</td>
<td>life</td>
<td>5yr</td>
<td>N/A</td>
<td>1yr</td>
<td>5yr</td>
</tr>
</table>
</div>
</div>
</div>
</td>
<td style="background: white;">
<div></div>
</td>
<td style="background: white;">1</td>
<td style="background: white;">
<div><span data-isdis="false"><input data-finaldate="10/03/2017" data-purchaseqty="1" data-sku="365054801" data-del="01097P6YRXW" type="number"></span></div>
</td>
</tr>
<tr data-odd="true">
<td style="background: white;">
<div><span >365054801</span><span style="display: block;">SO Line Comment:</span><textarea type="text" maxlength="70" placeholder="70 characters"></textarea></div>
</td>
<td style="background: white;">GOAK</td>
<td style="background: white;">ATD60H-8P (F.D.)</td>
<td style="background: white;">
<div>
<div>
<div>
<span >Warranty Information:</span>
<table style='width:1000px;>
<th >Upholstery:</th>
<th >Frame</th>
<th >Spring</th>
<th >Mechs</th>
<th >Cores</th>
<th >Mattresses</th>
<th >Fabric</th>
<th >Leather</th>
<tr>
<td></td>
<td>2yr</td>
<td>2yr</td>
<td>life</td>
<td>5yr</td>
<td>N/A</td>
<td>1yr</td>
<td>5yr</td>
</tr>
<th >Case Goods</th>
<th >Frame</th>
<th >Spring</th>
<th >Mechs</th>
<th >Cores</th>
<th >Mattresses</th>
<th >Fabric</th>
<th >Leather</th>
<tr>
<td></td>
<td>2yr</td>
<td>2yr</td>
<td>life</td>
<td>5yr</td>
<td>N/A</td>
<td>1yr</td>
<td>5yr</td>
</tr>
</table>
</div>
</div>
</div>
</td>
<td style="background: white;">
<div></div>
</td>
<td style="background: white;">1</td>
<td style="background: white;">
<div><span data-isdis="false"><input data-finaldate="10/03/2017" data-purchaseqty="1" data-sku="365054801" data-del="01097P6YRXW" type="number"></span></div>
</td>
</tr>
<tr data-even="true">
<td style="background: white;">
<div><span >202239352</span><span style="display: block;">SO Line Comment:</span><textarea type="text" maxlength="70" placeholder="70 characters"></textarea></div>
</td>
<td style="background: white;">RF14</td>
<td style="background: white;">393-52PWR STYLUS</td>
<td style="background: white;">
<div>
<div>
<div>
<span >Warranty Information:</span>
<table style='width:1000px;>
<th >Upholstery:</th>
<th >Frame</th>
<th >Spring</th>
<th >Mechs</th>
<th >Cores</th>
<th >Mattresses</th>
<th >Fabric</th>
<th >Leather</th>
<tr>
<td></td>
<td>2yr</td>
<td>2yr</td>
<td>life</td>
<td>5yr</td>
<td>N/A</td>
<td>1yr</td>
<td>5yr</td>
</tr>
<th >Case Goods</th>
<th >Frame</th>
<th >Spring</th>
<th >Mechs</th>
<th >Cores</th>
<th >Mattresses</th>
<th >Fabric</th>
<th >Leather</th>
<tr>
<td></td>
<td>2yr</td>
<td>2yr</td>
<td>life</td>
<td>5yr</td>
<td>N/A</td>
<td>1yr</td>
<td>5yr</td>
</tr>
</table>
</div>
</div>
</div>
</td>
<td style="background: white;">
<div></div>
</td>
<td style="background: white;">2</td>
<td style="background: white;">
<div><span data-isdis="false"><input data-finaldate="10/03/2017" data-purchaseqty="2" data-sku="202239352" data-del="01097P6YRXW" type="number"></span></div>
</td>
</tr>
</tbody>
</table>
</div>
</div>CodePudding user response：
Why you are not trying Bootstrap's Plugin for datatables. It is too easy to use and most efficient to use..
You can find on below link.. Bootstrap DataTable