resdog
16 Mar 2011, 11:51 AM
I have a table, that lists the information on a car inventory. There are 9 columns of data, then a description row that spans the entire row. Everything looks good, but when I apply the jquery plugin tablesorter and then click on a table header, it sorts the description row as a separate row, which is what it's programmed to do. What I need is a way to put in a 100% wide description row underneath the specs of the car, and have it be able to stay with the specs on a sort. does that make sense?
currently, I'm using a fixed width table, and the description is going into a div in a <td> and I'm positioning relatively so that it will stay with the other inventory:
<table class="inventory" id="Available">
<tr>
<td colspan="9" class="heading"><h2>Available Inventory</h2>
Please don't forget to check out our <a href="#Incoming">Incoming Inventory.</a>
</td>
</tr>
<tr>
<td colspan="9" class="sectionHead"><h3>Jaguar Sedans</h3></td>
</tr>
<tr>
<td colspan="9" class="noPadding">
<table class="tableHead" width="100%">
<thead>
<tr class="headerRow">
<th> </th>
<th> </th>
<th>Year</th>
<th>Make</th>
<th>Model</th>
<th>Stock</th>
<th>Color</th>
<th>Miles</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr class="upperListing">
<td style="width: 150px;" class="thumbnail"><a href="http://www.e-commercelabs.com/texascarsdirect/inventory/2008-jaguar-9473a/" border="0"><img width="150" height="75" src="http://www.e-commercelabs.com/texascarsdirect/wp-content/uploads/2011/03/9473A-150x75.jpg" class="attachment-post-thumbnail wp-post-image" alt="9473A" title="9473A" /> </a><div class="container"><div class="description">Clean CARFAX and AutoCheck history reports Charcoal leather interior GPS navigation system Bluetooth connectivity xenon headlamps with automatic leveling power heated/cooled memory seats cd player Alpine premium sound system front and rear park control electric glass sunroof CATS suspension with factory 19 inch Polaris alloy wheels tire pressure monitoring system heated wood steering wheel wood shift knob automatic dimming interior & exterior mirrors integrated garage door/entry gate opener cruise control abs brakes dual/side airbags alarm trip computer power adjustable pedals automatic stability control twilight sentinel rain sensitive windshield wipers full factory warranty and pre qualified for 100,000 mile extended warranty and Lojack Stolen Vehicle Recovery System</div></div></td>
<td width="30">
</td>
<td valign="top" class="padTop">2008</td>
<td valign="top" width="81" class="padTop">Jaguar</td>
<td valign="top" width="92" class="padTop">XJ8 Walnut Classic</td>
<td valign="top" width="75" class="padTop"><a href="http://www.e-commercelabs.com/texascarsdirect/inventory/2008-jaguar-9473a/">9473A</a></td>
<td valign="top" width="109" class="padTop">Ebony</td>
<td valign="top" class="padTop">45,565</td>
<td valign="top" class="padTop">$29,950</td>
</tr>
However, the client wants the table to be 100% wide, so I can no longer nest the description inside a div, because I can't make it a width of 100% (it would adopt the width of it's containing <td>).
Any ideas on how I can achieve this?
currently, I'm using a fixed width table, and the description is going into a div in a <td> and I'm positioning relatively so that it will stay with the other inventory:
<table class="inventory" id="Available">
<tr>
<td colspan="9" class="heading"><h2>Available Inventory</h2>
Please don't forget to check out our <a href="#Incoming">Incoming Inventory.</a>
</td>
</tr>
<tr>
<td colspan="9" class="sectionHead"><h3>Jaguar Sedans</h3></td>
</tr>
<tr>
<td colspan="9" class="noPadding">
<table class="tableHead" width="100%">
<thead>
<tr class="headerRow">
<th> </th>
<th> </th>
<th>Year</th>
<th>Make</th>
<th>Model</th>
<th>Stock</th>
<th>Color</th>
<th>Miles</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr class="upperListing">
<td style="width: 150px;" class="thumbnail"><a href="http://www.e-commercelabs.com/texascarsdirect/inventory/2008-jaguar-9473a/" border="0"><img width="150" height="75" src="http://www.e-commercelabs.com/texascarsdirect/wp-content/uploads/2011/03/9473A-150x75.jpg" class="attachment-post-thumbnail wp-post-image" alt="9473A" title="9473A" /> </a><div class="container"><div class="description">Clean CARFAX and AutoCheck history reports Charcoal leather interior GPS navigation system Bluetooth connectivity xenon headlamps with automatic leveling power heated/cooled memory seats cd player Alpine premium sound system front and rear park control electric glass sunroof CATS suspension with factory 19 inch Polaris alloy wheels tire pressure monitoring system heated wood steering wheel wood shift knob automatic dimming interior & exterior mirrors integrated garage door/entry gate opener cruise control abs brakes dual/side airbags alarm trip computer power adjustable pedals automatic stability control twilight sentinel rain sensitive windshield wipers full factory warranty and pre qualified for 100,000 mile extended warranty and Lojack Stolen Vehicle Recovery System</div></div></td>
<td width="30">
</td>
<td valign="top" class="padTop">2008</td>
<td valign="top" width="81" class="padTop">Jaguar</td>
<td valign="top" width="92" class="padTop">XJ8 Walnut Classic</td>
<td valign="top" width="75" class="padTop"><a href="http://www.e-commercelabs.com/texascarsdirect/inventory/2008-jaguar-9473a/">9473A</a></td>
<td valign="top" width="109" class="padTop">Ebony</td>
<td valign="top" class="padTop">45,565</td>
<td valign="top" class="padTop">$29,950</td>
</tr>
However, the client wants the table to be 100% wide, so I can no longer nest the description inside a div, because I can't make it a width of 100% (it would adopt the width of it's containing <td>).
Any ideas on how I can achieve this?