CSS Table width not being able to be set

Question

2 Columns, a few rows. The width of the entire table seems to be set for good. No chance of changing it. All I can do is move the row separator so one columns gets stretched while the other expands.

This is the CSS file.

    body {
    font: normal 11px auto "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
    color: #4f6b72;
    background: #E6EAE9;
}

a {
    color: #c75f3e;
}

#mytable {
    width: 450px;
    padding: 0;
    margin: 0;
    height: 39px;
}

caption {
    padding: 0 0 5px 0;
    width: 489px;    
    font: italic 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
    text-align: right;
}

th {
    font: bold 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
    color: #4f6b72;
    border-right: 1px solid #C1DAD7;
    border-bottom: 1px solid #C1DAD7;
    border-top: 1px solid #C1DAD7;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-align: left;
    padding: 6px 6px 6px 12px;
    background: #CAE8EA url(images/bg_header.jpg)  no-repeat;
}

th.nobg {
    border-top: 0;
    border-left: 0;
    border-right: 1px solid #C1DAD7;
    background: none;
}

td {
    border-right: 1px solid #C1DAD7;
    border-bottom: 1px solid #C1DAD7;
    background: #fff;
    padding: 6px 6px 6px 12px;
    color: #4f6b72;
}


td.alt {
    background: #F5FAFA;
    color: #797268;
}

th.spec {
    border-left: 1px solid #C1DAD7;
    border-top: 0;
    background: #fff url(images/bullet1.gif)  no-repeat;;
    font: bold 10px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
}

th.specalt {
    border-left: 1px solid #C1DAD7;
    border-top: 0;
    background: #f5fafa url(images/bullet2.gif)  no-repeat;;
    font: bold 10px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
    color: #797268;
}

And this the table.

   <table id="mytable" cellspacing ="0">
    <caption>Table 1: Descriptions </caption>
    <tr>
      <th scope="col" abbr="Configurations" class="nobg" style="width: 47px">Configurations</th>
      <th scope="col" abbr="Dual 1.8GHz">Original Stack</th>
    </tr>
    <tr>
      <th scope="row" class="spec" style="width: 47px">Model</th>
      <td class="style1">3xPa</td>
    </tr>
    <tr>
      <th scope="row" class="specalt" style="width: 47px">Year</th>
      <td class="alt" style="width: 181px">1998/A</td>
    </tr>
    </table>

I'm not sure what's preventing me from changing the width of the entire table. I've tried changing the width property in #mytable but it's doing absolutely nothing. I'm using VS 2010, aspx webform.

Any idea?

blad · Accepted Answer · 2012-08-13 23:56:08Z

1

Changing the table width in the css works fine for me on chrome.

Try removing the width for your caption, the absolute width on the caption might be tricking you into thinking the table size is not changing...

caption {
    padding: 0 0 5px 0;
    /*width: 489px;  Commented Out */
    font: italic 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
    text-align: right;
}

answered Aug 13, 2012 at 23:56

blad

6645 silver badges8 bronze badges

1

ditto on IE, 7,8,9 on my machine...works...are those the version your testing on? Is there more CSS and HTML involved?
– blad
Commented Aug 14, 2012 at 0:03
Version 9 yes, it shortened row number 2 (earlier the short row was number 1, but rather than that it's the same)
– Daniel Sh.
Commented Aug 14, 2012 at 0:09
Something weird is happening. Now columns are streched, like in a half compared to the previous state. But weird thing is table is now fixed to that... Even moving the width attribute from #mytable is not expanding it.
– Daniel Sh.
Commented Aug 14, 2012 at 0:21
1

it's done! had to restart VS. Thanks for the patience and explanations.
– Daniel Sh.
Commented Aug 14, 2012 at 0:37

Add a comment |

Collectives™ on Stack Overflow

CSS Table width not being able to be set

1 Answer 1

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Related