テーブルの列にクラスを適用しません

StackOverflow https://stackoverflow.com/questions/3857437

  •  27-09-2019
  •  | 
  •  

質問

COLの私の理解は、テーブルの列のすべての要素のクラスを示すために使用される可能性があるということです。しかし、これは私のために働いていないようです。クラスを個々のTDに適用することはできますが、これを避けるのに役立つCOLが欲しいです。

これがHTMLヘッドです：

<head>
<style type="text/css">
 .slick {
  background-color:#b0c4de; /*This always works*/
  border-style:solid; /*This doesn't work when only applied to a <col>*/
  border-width:5px;
 }
</style>
</head>

興味深いことに、背景色は常に機能しますが、境界線はいつか失敗します。

これがHTMLボディです：

<body>
<table><tbody>
 <colgroup>
  <col class="slick" />
  <col class="slick" />
 </colgroup>
 <tr id="r1">
  <td><label >Planner/Scheduler/Estimators</label></td>
  <td class="slick"><label >2010</label></td>
 </tr>
</tbody></table>
</body>

TodyまたはColgroupタグを削除することは重要ではないようです。背景は両方の要素に存在します。境界線は、クラスがTDタグで指定されている2番目の要素にのみ適用されます。

私は境界線がColで動作しないという予感を持っていましたが、Firebugは、滑らかなスタイルが左列にまったく適用されないことを示しています。どうしたの？

役に立ちましたか？

解決

W3 Schoolsによると、Firefoxでは幅属性のみが機能します。また、境界属性がまったくサポートされているようには見えません。

http://www.w3schools.com/tags/tag_col.asp

他のヒント

これは、 CSS 2.1仕様が定義されています さまざまな境界特性が設定したときにのみ適用されること border-collapse: collapse; 関連について <table> エレメント。

さらに、CSS 2.1によれば、列をスタイリングするために使用できるプロパティはほとんどありません（制限付き）。

  • 国境特性（必要があります border-collapse: collapse; 関連について <table>エレメント）
  • バックグラウンドプロパティ（セルと行の背景が透明である場合にのみ適用されます）
  • width
  • visibility （価値 collapse 細胞のレンダリングを回避し、他の柱にまたがる細胞が切り取られます）

すべてのTDにクラスを適用する必要はありません。

TDをスタイリングするだけです。

 td {
  background-color:#b0c4de;
  border-style:solid;
  border-width:5px;
 }
ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top