Need help with mobile CSS

[wajake41]

Hello forum:
This is a example of my mobile site's HTML:
<table class="basket">
<tr id="basket-header-row" style="height:11px;">
<td bgcolor="#dddddd" class="qty"></td>
<td class="prod">Item</td>
<td colspan=2 class="qty">Quantity</td>
<td class="qty">Each</td>
<td class="m-total">Total</td> </tr>

I want to adjust the width of the m-total class column but when I modify the m-total class by adding a width (added width:10px;):
.basket #basket-header-row td.m-total{
border-right:1px solid #979797;
text-align:center;
width:10px;
}

The column width doesn't change. What am I doing wrong?
Thanks, Larry

[Bruce - PhosphorMedia]

Re: Need help with mobile CSS

There is something funky about the markup you show. You have a colspan, but no reference to columns being spanned...regardless, you'll probably want to start with adding

table-layout: fixed;

to the table itself, then you need to define a specific width for ALL columns in order to get consistent results.

[wajake41]

Re: Need help with mobile CSS

Hi Bruce:
That's just the header row from our mobile BASK page. I didn't include the rest of the <table.
The table is from the mobile site that Miva build for us 3 years ago. The CSS is Miva's too.
I assumed that the CSS: #basket-header-row td.m-total{ CSS was for the class="m-total" column. Not so?
Larry

[Bruce - PhosphorMedia]

Re: Need help with mobile CSS

CSS applied to Tables is basically "advisory". Tables often times do what they want based on other stylistic effects. That's why we use

table-layout: fixed;

By default, tables use

table-layout: auto;

which means, among other things, that column width is set by content in the table columns

(Note though, I should have said "best results you need to set the width of ALL columns." when using 'fixed'.)

[wajake41]

Re: Need help with mobile CSS

Thanks Bruce: I think that answers my question. Didn't know about the "advisory".
Larry