-
Posts
-
Hi,
We’ve created a table that contains a descriptive column on the left and a default column on the right. The purpose of the table is to list the product we’re talking about in the descriptive column and explain it in detail in the default column. This means that the default column on the right contains more information/content than the descriptive column on the left. However, the tables aren’t aligning properly. So if for example, the right-hand column takes up the space of 3 lines, the adjoining left-hand column still only takes up the space of one line – so they don’t look like they’re linked. Ideally, if the right-hand column takes up the space of 3 lines, I would need the left-hand column to do the same, even if there is less content.
Is this possible? Because what’s happening is about 3 of the left-hand columns are lining up with one of the right-hand columns, so it doesn’t look like the first is supposed to flow into the second, it’s just a jumbled list of info.
Thanks,
Lea
Hi,
If I understood you correctly , you want the information about each product to flow horizontally in rows. I believe the table element had in mind that the information will flow vertically (in columns) .. something along this line -> http://www.browserstack.com/pricing
Do you have a url where we can see the code in order for us to give you the css to resolve your issue.
Thanks,
Nick
I have the same issue. This occurs only when using the pricing table format. That format is not responsive and does not keep the rows aligned. If you use the data table it works fine … but you lose the nice formatting of the pricing table.
Seems the Pricing Format is NOT using the <table> at all. But a fancy unordered list causes the rows to have different heights depending on each cell’s word wrap.
In next release it would be nice to have the Pricing Table updated to use <table> in order to solve the problem (it’s not very usable now for many desired uses). For now, I would welcome any suggestions on how best to format the Data Table like the pricing?
Here are examples:
PRICE ‘TABLE’
<div class='avia-table main_color avia-pricing-table-container avia-table-1 avia-builder-el-32 avia-builder-el-no-sibling '>
<div class='pricing-table-wrap'>
<ul class='pricing-table avia-desc-col'>
<li class='avia-heading-row'>
<div class='first-table-item'>
Month
</div>
<span class='pricing-extra'></span>
<li class=''>1st Month
<li class=''>2nd Month
<li class=''>3rd Month
<li class=''>4th Month
<li class=''>5th Month
<li class=''>6th Month
<li class=''>Month 7-11
<li class=''>12th Month
<li class='avia-heading-row empty-table-cell'><span class='fallback-table-val'>Saves Total: $396</span>
</ul>
</div>
<div class='pricing-table-wrap'>
<ul class='pricing-table avia-desc-col'>
<li class='avia-heading-row'>
<div class='first-table-item'>
Order
</div>
<span class='pricing-extra'></span>
<li class=''>Orders 1 Greens
<li class=''>Orders 1 Greens
<li class=''>Orders 1 Greens
<li class=''>Orders 1 Greens
<li class=''>Orders 1 Greens
<li class=''>Orders 1 Greens
<li class=''>Orders 1 Greens (each month)
<li class=''>Orders 1 Greens
<li class='avia-heading-row empty-table-cell'><span class='fallback-table-val'>Saves Total: $396</span>
</div>
<div class='pricing-table-wrap'>
<ul class='pricing-table '>
<li class='avia-heading-row'>
<div class='first-table-item'>
Cost
</div>
<span class='pricing-extra'></span>
<li class=''>Cost: $33.00
<li class=''>Cost: $33.00
<li class=''>Cost: $33.00
<li class=''>Cost: $33.00
<li class=''>Cost: $33.00
<li class=''>Cost: $33.00
<li class=''>Cost: $33.00
<li class=''>Cost: $33.00
<li class='avia-heading-row empty-table-cell'><span class='fallback-table-val'>Saves Total: $396</span>
</div>
<div class='pricing-table-wrap'>
<ul class='pricing-table '>
<li class='avia-heading-row'>
<div class='first-table-item'>
Savings
</div>
<span class='pricing-extra'></span>
<li class=''>Saves: $22.00
<li class=''>Saves: $22.00
<li class=''>Saves: $22.00
<li class=''>Saves: $22.00
<li class=''>Saves: $22.00
<li class=''>Saves: $22.00
<li class=''>Saves: $22.00
<li class=''>Saves: $22.00
<li class='avia-heading-row'>Saves Total: $396
</div>
<div class='pricing-table-wrap'>
<ul class='pricing-table '>
<li class='avia-heading-row'>
<div class='first-table-item'>
Pearks Points
</div>
<span class='pricing-extra'></span>
<li class=''>3.30
<li class=''>3.30
<li class=''>3.30
<li class=''>3.30
<li class=''>3.30
<li class=''>3.30 + 50 BONUS = 53.3
<li class=''>3.30
<li class=''>3.30 + 150 BONUS = 153.3
<li class='avia-heading-row'>Total Perks Points: 239.6
</div>
<div class='pricing-table-wrap'>
<ul class='pricing-table '>
<li class='avia-heading-row'>
<div class='first-table-item'>
Shipping (est)
</div>
<span class='pricing-extra'></span>
<li class=''>$3.50
<li class=''>$3.50
<li class=''>$3.50
<li class=''>FREE (Saves $3.50)
<li class=''>FREE (Saves $3.50)
<li class=''>FREE (Saves $3.50)
<li class=''>FREE (Saves $3.50)
<li class=''>FREE (Saves $3.50)
<li class='avia-heading-row'>Cost: $10.50 Saves: $31.50
</div>
</div>
</div>DATA TABLE
<table class='avia-table avia-data-table avia-table-2 avia-builder-el-33 el_after_av_one_full '>
<tbody>
<tr class='avia-heading-row'>
<th class=''>
Month
</th>
<th class=''>
Order
</th>
<th class=''>
Cost
</th>
<th class=''>
Savings Over Regular Price
</th>
<th class=''>
Perks Points
</th>
<th class=''>
Shipping (est)
</th>
</tr>
<tr class=''>
<td class=''>
1st Month
</td>
<td class=''>
Orders 1 Greens
</td>
<td class=''>
Cost: $33.00
</td>
<td class=''>
Saves: $22.00
</td>
<td class=''>
3.30
</td>
<td class=''>
$3.50
</td>
</tr>
<tr class=''>
<td class=''>
2nd Month
</td>
<td class=''>
Orders 1 Greens
</td>
<td class=''>
Cost: $33.00
</td>
<td class=''>
Saves: $22.00
</td>
<td class=''>
3.30
</td>
<td class=''>
$3.50
</td>
</tr>
<tr class=''>
<td class=''>
3rd Month
</td>
<td class=''>
Orders 1 Greens
</td>
<td class=''>
Cost: $33.00
</td>
<td class=''>
Saves: $22.00
</td>
<td class=''>
3.30
</td>
<td class=''>
$3.50
</td>
</tr>
<tr class=''>
<td class=''>
4th Month
</td>
<td class=''>
Orders 1 Greens
</td>
<td class=''>
Cost: $33.00
</td>
<td class=''>
Saves: $22.00
</td>
<td class=''>
3.30
</td>
<td class=''>
FREE (Saves $3.50)
</td>
</tr>
<tr class=''>
<td class=''>
5th Month
</td>
<td class=''>
Orders 1 Greens
</td>
<td class=''>
Cost: $33.00
</td>
<td class=''>
Saves: $22.00
</td>
<td class=''>
3.30
</td>
<td class=''>
FREE (Saves $3.50)
</td>
</tr>
<tr class=''>
<td class=''>
6th Month
</td>
<td class=''>
Orders 1 Greens
</td>
<td class=''>
Cost: $33.00
</td>
<td class=''>
Saves: $22.00
</td>
<td class=''>
3.30 + 50 BONUS = 53.3
</td>
<td class=''>
FREE (Saves $3.50)
</td>
</tr>
<tr class=''>
<td class=''>
Months 7-11
</td>
<td class=''>
Orders 1 Greens (each month)
</td>
<td class=''>
Cost: $33.00
</td>
<td class=''>
Saves: $22.00
</td>
<td class=''>
3.30
</td>
<td class=''>
FREE (Saves $3.50)
</td>
</tr>
<tr class=''>
<td class=''>
12th Month
</td>
<td class=''>
Orders 1 Greens
</td>
<td class=''>
Cost: $33.00
</td>
<td class=''>
Saves: $22.00
</td>
<td class=''>
3.30 + 150 BONUS = 153.3
</td>
<td class=''>
FREE (Saves $3.50)
</td>
</tr>
<tr class=''>
<td class=''>
Totals
</td>
<td class=''>
</td>
<td class=''>
</td>
<td class=''>
Saves Total: $396
</td>
<td class=''>
Total Perks Points: 239.6
</td>
<td class=''>
Cost: $10.50 Saves: $31.50
</td>
</tr>
</tbody>
</table>
<style type='text/css'>
.avia-table-2 td:nth-of-type(0):before { content: 'Month'; } .avia-table-2 td:nth-of-type(1):before { content: 'Order'; } .avia-table-2 td:nth-of-type(2):before { content: 'Cost'; } .avia-table-2 td:nth-of-type(3):before { content: 'Savings Over Regular Price'; } .avia-table-2 td:nth-of-type(4):before { content: 'Perks Points'; } .avia-table-2 td:nth-of-type(5):before { content: 'Shipping (est)'; }
</style>Hi,
Where did you get the first example using unordered list from? Was it from the theme? Because I formatted your html and there is an error in it with an unclosed /ul everywhere. I am looking into this now.
I just checked and I am getting the correct html for pricing table. Are you using at least v. 1.71 of the theme? If you are not, please updata as there were changes made to the table from the older versions.
Can you show the page where your code is, because word wrapping can be removed easily with some css.
*Please read the bottom portion of what I wrote here https://kriesi.at/support/topic/description-column-in-tables-not-aligning-properly-with-adjoining-columns#post-122022 … You can use the same process to add *any* price table you find on any website to yours.
Thanks,
Nick
Hi Nick,
I get what you’re saying about vertical alignment; you’re correct in that I’m looking for horizontal alignment.
Here’s a link: http://siptrunkplus.com/marketdemandsforcallrecordin/ You can see an example of the misalignment in the tables at the bottom of the page.
Thanks,
Lea
Hi 500Webmaste,
How’s this? http://www.clipular.com/c?9129028=TFXj4p_3RJD6Twkf3OQSL_zP0L8&f=.png
Please add this to you /css/custom.css file OR to Quick CSS located in Enfold > Styling Layout.. the text area at the bottom of that page.
.avia-table-2 .pricing-table>li:last-child {
height: 150px;
}
.avia-table-2 .pricing-table-wrap ul li, .avia-table-3 .pricing-table-wrap ul li {
height: 55px;
}
What you can do if you want a different look for your tables, is
Install free plugin called Enhanced Text Widget ( http://wordpress.org/plugins/enhanced-text-widget/ ),
Then go to Appearance > Widgets and create two custom sidebars – call one: left-side, and the other: right-side
create a new page with no sidebars
Add two 1/2 column elements.
Inside each of the two column elements add a widget area element.
Set the widget area elements to the sidebars you created earlier (left and right)
Go back to Appearance > Widgets and add one Enhanced text widget , to each of the two custom sidebars (left and right). Check option to not display title of widget.
Now you can just use an html table generator like this one http://www.textfixer.com/html/html-table-generator.php to style and create each of your tables and then just paste whatever code from the generator right into the Enhanced text widgets.
Thanks,
Nick
- The topic ‘Description Column in Tables Not Aligning Properly with Adjoining Columns’ is closed to new replies.