0

CSS:

.one {
    width: 13%;
}

.two {
    width: 30%;
}

.three {
    width: 30%;
}

HTML:

<table>
    <tr>
        <th class= "one">Quantity</th>
        <th class= "two">Info</th>
        <th class= "three">Price</th>
    </tr>
    <tr>
        <td class = "one"><input type="text" name="quantity1" value=""/>
        <td class = "two">Cheap Monday Jeans 30/34 </td>
        <td class = "three">$39.99 </td>
    </tr>
    <tr>
        <td class = "one"><input type="text" name="quantity2" value=""/></td>
        <td class = "two">Herschel Bag (free) </td>
        <td class = "three">$129.99 </td>
    </tr>
    <tr>
        <td class = "one"><input type="text" name="quantity3" value=""/></td>
        <td class = "two">Diesel t-shirt (s) </td>
        <td class = "three">$59.99 </td>
    </tr>
    <tr>
        <td class = "one"><input type="text" name="quantity4" value=""/></td>
        <td class = "two">Superdry Patrol Lite Jacket (m) </td>
        <td class = "three">$129.99 </td>
    </tr>
    <tr>
        <td class = "one"><input type="text" name="quantity5" value=""/></td>
        <td class = "two">I love Canada t-shirt (s) </td>
        <td class = "three">$19.99 </td>
    </tr>
</table>

テーブルの行 (服の情報と価格) をテーブル ヘッダーのすぐ下に配置します。つまり、中央に配置したいのです。テーブルの行が左に傾いていて、ヘッダーのすぐ下に配置できない理由がわかりません。

試してみました td { text-align: center; }、しかし動作しません。

助けていただければ幸いです、ありがとう。

ここに画像の説明を入力

4

6 に答える 6

1

ねえ、このデモを見てください

リンクでうまくいくことを願っています これらは、 CSS部分
で行う必要がある唯一の変更です。

.one {
    width: 1%;
    text-align:center;
     }

.two {
     width: 10%;
     text-align:center;
     }

.three {
    width: 10%;
    text-align:center;
       }

私が得た出力は次のようなものでした：

上記のコードの出力。
これがあなたの望むものであることを願っています。

于 2013-08-01T03:51:23.587 に答える
1

thヘッダー要素を左揃えにします。要素を中央揃えにすることもできますが、td見栄えがよくありません。

th.one {
     text-align:left;   
}
th.two {
     text-align:left;   
}
th.three {
     text-align:left;   
}
.one {
    width: 13%;
}

.two {
    width: 30%;
}

.three {
    width: 30%;
}
于 2013-08-01T02:33:41.150 に答える
0

<th>要素を左揃えにする必要があります。

th {
    text-align:left;
}

また、次のよう<colgroup>に、ネストされた<col>タグを使用して表の列のスタイルを設定することを検討する必要があります。

<table>
    <colgroup>
        <col class="one" />
        <col class="two" />
        <col class="three" />
    </colgroup>
    <tr>
        <th>Quantity</th>
        <th>Info</th>
        <th>Price</th>
    </tr>
    <tr>
        <td><input type="text" name="quantity1" value=""/>
        <td>Cheap Monday Jeans 30/34 </td>
        <td>$39.99 </td>
    </tr>
    ...rest of the code

このように、「class」属性を ALLLL に追加する必要はありません<td>。

于 2013-08-01T02:45:12.567 に答える
0

それはあなたが望むものですか？デモhttp://jsfiddle.net/yeyene/u7WzM/2/

右揃え、中央揃え。

th.one, td.one {
     text-align:center;   
}
th.two {
     text-align:center;   
}
td.two {
     text-align:right;  
    padding-right:5%;
}
th.three, td.three {
     text-align:center;   
}
.one {
    width: 13%;
}

.two {
    width: 30%;
}

.three {
    width: 30%;
}
于 2013-08-01T03:56:12.353 に答える
0

問題は、左揃えのものを中央揃えのものの下に並べたいということです。おそらく最善の策は、見出しを左揃えにし、パディングを使用して列間にスペースを空けることです。

HTML:

<table>
<tr>
    <th class= "one">Quantity</th>
    <th class= "two">Info</th>
    <th class= "three">Prices</th>
</tr>
<tr>
    <td class = "one"><input type="text" name="quantity1" value=""/></td>
    <td class = "two">Cheap Monday Jeans 30/34 </td>
    <td class = "three">$39.99 </td>
</tr>
<tr>
    <td class = "one"><input type="text" name="quantity2" value=""/></td>
    <td class = "two">Herschel Bag (free) </td>
    <td class = "three">$129.99 </td>
</tr>
<tr>
    <td class = "one"><input type="text" name="quantity3" value=""/></td>
    <td class = "two">Diesel t-shirt (s) </td>
    <td class = "three">$59.99 </td>
</tr>
<tr>
    <td class = "one"><input type="text" name="quantity4" value=""/></td>
    <td class = "two">Superdry Patrol Lite Jacket (m) </td>
    <td class = "three">$129.99 </td>
</tr>
<tr>
    <td class = "one"><input type="text" name="quantity5" value=""/></td>
    <td class = "two">I love Canada t-shirt (s) </td>
    <td class = "three">$19.99 </td>
</tr>
</table>

そしてCSS：

.one {
    width: 13%;
}

.two {
    width: 30%;
}

.three {
    width: 30%;
}
th {
    text-align: left;
}
.two, .three {
    padding-left: 10%;
}

例: http://jsfiddle.net/cpmmk/

ここに画像の説明を入力

于 2013-08-01T02:32:14.020 に答える