formatting table display

While we got the eCart logic working as desired through checkout, we are trying to figure out based on the attached printscreens in a word document as follows:

While first exhibit shows (keyword = yellow) to product results display desirably normal, in the second exhibit (keyword=black) for a different search shows the columns extending out of bounds from the page layout probably due to the item name column content. Is there any way to enforce wrapping at a smaller width?

2nd, in exhibit 3, is there any way to change the eCart style from Pacifica to the one we're using for the product results? and how involved is it if possible?

If you add: table-layout: fixed;

to your css that controls the table
.WADAResultsTable {

That would allow you to set the widths and it wouldn't allow the table to stretch... however you could then have overlapping text when it doesn't fit into a column, so there is a give and take.

I'd make sure to set a width for the first and last columns to be very tight to the content since it doesn't vary. Then specify reasonable widths to the other columns. You might want to rename the "purity characteristics" column to just "purity" so you can tighten it, since it is usually just a percentage.

Looks like I'll need to set widths to certain columns to avoid the overlapping text particularly in the item name column as shown in latest word document attachment.

Yes, adding that css will prevent the table from stretching to fit the content, but that can leave you with overlapping text since it was stretching for a reason.

I went ahead and applied width="5%" to the first and last column, and "15%" to the other 6 columns (which all adds up to 100%, so hopefully we're good.

edit: hmmm, still overlapping on item name column somehow...

If it won't fit, and there are no spaces in the field to allow a logical wrap, then it will overlap. That is the limitation in not allowing it to grow to fit.