ブラウザがtdを指定した幅プロパティより大きく表示しているのはなぜですか？

Question

tdの幅は162pxですが、style = "width：25px"（tdとthの場合）

これをCSSファイルに入れました。

table, td, th { 
    border: 1px solid black; 
} 
table { 
    border-collapse:collapse; 
} 

table.narrow th, td { 
    width:50px; 
} 

動作しません。最後のクラスはclass = "narrow"のテーブルを取り、その子孫のすべての要素を50px幅にします。クロムはこれを読んで無視していますか？またはCSSはちょうどばかげたことですか？または私は何ですか？なぜCSSは通常のプログラミング言語のように、あなたがそれを伝えることができないのですか？

だから、スタイル= "width：25px"を第1列のtdに貼り付けてみましたが、タグはまだ動作しません。 Chromeでは

element.style { width:25px; } 

が表示されますが、なぜそれが162ピクセルで表示されているのかわかりません。

誰か手がかりはありますか？ ありがとう。

---

編集：Kolinkは私に必要な手がかりをくれました。タグ内のフォームテキストフィールドは、最小幅が大きくなりました。テーブルを縮小するためにこのスタイルを追加しました：

.narrow input{ 
    width:80px; 
} 

class = "narrow"テーブル内のすべての入力の幅を減らし、テーブルの幅を狭くしました。

Answer 1

テーブルのスタイルにを設定します。それ以外の場合、テーブルレイアウトは緩く、widthはmin-widthのように扱われます。

Answer 2

あなたの定義は、すべてのTD

table.narrow th, td { 
    width:50px; 
} 

のためであるあなたが列挙

table.narrow th, table.narrow td { 
    width:50px; 
}