出来るだけシンプルな方法でテーブルに3つのスタイルを指定する方法

![イメージ説明]WIDTH:70
上記のような文字配列をしたいです。
1番は中央寄せ(題名)、2番は左寄せ(型番)、3番は右寄せ(価格・数量等)です。
(実際は数十列・行があります)
1番部分を<th>とし、2・3番は<td>です。
2番部分に<td class="tblh">と設定し、以下のCSSを記述しました

lang
1.tbl{
2    border-collapse: collapse; 
3    border: 1px #333333 solid; 
4}
5.tbl th { 
6	padding:8px;
7    border: 1px #333333 solid; 
8}
9.tblh{
10	text-align:left;
11	padding:8px;
12    border: 1px #333333 solid; 
13
14}
15.tbl td { 
16	padding:8px;
17	text-align:center;
18    border: 1px #333333 solid; 
19	
20}

しかし、左寄せが効きません。
もちろん、「tbl td」→「tbld」として、3番のセルに全部<td class="tbld">を設定すれば解決するのは分かっているのですが、これを数十個作るので手間がかかるなと思い、出来るだけ簡単に出来る方法を探しています。

html部分に出来るだけ手を加えず3つのスタイルを設定することは出来るでしょうか?

行動規範の内容に同意します

回答1件

ベストアンサー

こういうこと？

.tblh と .tbl td だと .tbl td の方が強いので、 .tblh を .tbl .tblh として同じ優先度にして、順番も入れ替えて .tbl .tblh の方が強くなるようにしました。

lang
1<!doctype html>
2<html>
3<head>
4    <meta charset="utf-8">
5    <title>sample</title>
6    <style>
7        .tbl{
8            border-collapse: collapse;
9            border: 1px #333333 solid;
10        }
11        .tbl th {
12            padding:8px;
13            border: 1px #333333 solid;
14        }
15        .tbl td {
16            padding:8px;
17            text-align:right;
18            border: 1px #333333 solid;
19        }
20        .tbl .tblh{
21            text-align:left;
22            padding:8px;
23            border: 1px #333333 solid;
24
25        }
26    </style>
27</head>
28<body>
29    <table class="tbl" style="width:100px">
30        <tr>
31            <th>1</th>
32            <th>1</th>
33        </tr>
34        <tr>
35            <td class="tblh">2</td>
36            <td>3</td>
37        </tr>
38        <tr>
39            <td class="tblh">2</td>
40            <td>3</td>
41        </tr>
42    </table>
43</body>
44</html>

あるいはサポートするブラウザの種類によってはこんなのでもいいのかもしれません？（IE8 とかは恐らく未サポート）

lang
1<!doctype html>
2<html>
3<head>
4    <meta charset="utf-8">
5    <title>sample</title>
6    <style>
7        .tbl{
8            border-collapse: collapse;
9            border: 1px #333333 solid;
10        }
11        .tbl th {
12            padding:8px;
13            border: 1px #333333 solid;
14        }
15        .tbl td {
16            padding:8px;
17            border: 1px #333333 solid;
18            text-align: left;
19        }
20        .tbl td:nth-of-type(2) {
21            text-align: right;
22        }
23    </style>
24</head>
25<body>
26    <table class="tbl" style="width:100px">
27        <tr>
28            <th>1</th>
29            <th>1</th>
30        </tr>
31        <tr>
32            <td>2</td>
33            <td>3</td>
34        </tr>
35        <tr>
36            <td>2</td>
37            <td>3</td>
38        </tr>
39    </table>
40</body>
41</html>