0

2列、数行。テーブル全体の幅は適切に設定されているようです。それを変更する可能性はありません。私にできることは、行の区切り文字を移動して、一方の列が引き伸ばされ、もう一方の列が拡張されるようにすることだけです。

これはCSSファイルです。

    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;
}

そしてこれはテーブルです。

   <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>

テーブル全体の幅を変更できない原因がわかりません。#mytableのwidthプロパティを変更しようとしましたが、まったく何もしていません。私はVS2010、aspxwebformを使用しています。

何か案が？

4

1 に答える 1

1

css でテーブルの幅を変更すると、Chrome で問題なく動作します。

キャプションの幅を削除してみてください。キャプションの絶対幅が、テーブルのサイズが変化していないと思わせる可能性があります...

caption {
    padding: 0 0 5px 0;
    /*width: 489px;  Commented Out */
    font: italic 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
    text-align: right;
}
于 2012-08-13T23:56:08.270 に答える