をクリックしてください<th>をクリックしてください：<th>を100％の幅と高さに設定してください

私は問題があります。私は100％の高さを得るためにクリック可能なヘッダーリンクを取得できません。 JavaScriptを使わずに。をクリックしてください<th>をクリックしてください：<th>を100％の幅と高さに設定してください

私はグーグルで見つけた多くのことを試しましたが、誰も私の問題を解決しませんでした。

私はこの結果を得る：

alt text http://thomasstock.net/css100percent.jpg

これは私のhtmlです：

このCSSで

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title></title> 
    <link href="StyleSheet.css" rel="stylesheet" type="text/css" /> 
</head> 
<body> 
    <table> 
     <thead> 
      <tr> 
       <th> 
        <a href="#">header 1</a> 
       </th> 
       <th> 
        <a href="#">some very very very very very very very very very long header 2</a> 
       </th> 
       <th> 
        <a href="#">3</a> 
       </th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr> 
       <td> 
        cell a1 
       </td> 
       <td> 
        cell a2 
       </td> 
       <td> 
        cell a3 
       </td> 
      </tr> 
      <tr> 
       <td> 
        cell b1 
       </td> 
       <td> 
        cell b2 
       </td> 
       <td> 
        cell b3 
       </td> 
      </tr> 
     </tbody> 
    </table> 
</body> 
</html>

：

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

th a 
{ 
    background-color: Fuchsia; 

    /* Making the headerlinks 100% width */ 
    width:100%; 
    float:left; 

    /* Making the headerlinks 100% height ??? */ 
    height: 100%; /* doesnt work! */ 
    min-height:100%; 
} 
tr 
{ 
    height:100%; 
}

download this code here

=>ヘッダーを完全にピンク色にするにはどうすればいいですか？& clickable？（？JavaScriptを使用せずに）

出典

2009-05-26 Thomas Stock

あなたはblock-level elementとしてthの内側aを表示する必要があります。

th a { 
    display: block; 
}

出典

2009-05-26 08:35:41 Gumbo

これは私がfloat：leftを設定することなく100％の幅を使用することができますが、100％の高さを固定するようには思われません。 –

TH要素に特定の高さを付ける必要があります。そうでなければ、THの高さはその子の高さに依存するからです。一方、子供の高さは収容箱に依存し、したがってTH要素に依存する。 – Gumbo

あなたは、ヘッダーのあなたのリンクにdisplay:blockを設定する必要があります。 height：width属性はインライン要素で無視されます。

th a 
{ 
    display:block; 
    background-color: Fuchsia; 

    /* Making the headerlinks 100% width */ 
    width:100%; 

    /* Making the headerlinks 100% height ??? */ 
    height: 100%; 
}

編集：は100％高さが機能することを言及し忘れた、親は例えば、指定された高さを持っている必要があります

th { 
    white-space: nowrap; 
}

を設定

th 
{ 
    height: 40px; 
}

出典

2009-05-26 08:37:36

これは私がfloat：leftを設定することなく100％の幅を使用することを可能にしますが、100％の高さを修正するようには思われません。 –

@ edit：はい実際には、親は特定の高さが必要です。しかし、私はそれが必要ではない解決策を望んでいました。まあ、私はjavascriptを無効にした人にこれを使用し、JavaScriptのTHのクリックイベントを訪問者の96％に追加します:-) –

は良い計画のように聞こえます。プロトタイプやJQueryは、JS側で簡単に作成するのに適しています。子供をループさせて、最大の高さを見つけて、すべての子供がその高さを共有するように設定してください。ブラウザのサイズ変更が考慮されている高さを設定するときは注意してください。 onresizeイベント（http://www.w3schools.com/jsref/jsref_onresize.asp）を使用して、いつ発生するかを判断できます。 –

おそらく

もっともらしいではないが、いくつかのケースでは、完全に問題を取り除きます。

出典

2009-05-26 22:16:14

各リンクに任意の高さをかなり長く設定することができます：（6em多分？）テーブルセルの最大高さをthに設定します。オーバーフローを隠して（3em？）。この方法では、すべてのリンクの高さが表のセルの高さよりも高くなりますが、オーバーフローが隠されてしまうため、ピンクでクリック可能でなければなりません。 thにはdisplay:relative;を設定してください。そうしないと、IEの古いバージョンはオーバーフローを起こさないでしょう。幸運:)

出典

2009-05-27 05:22:10

をクリックしてください<th>をクリックしてください：<th>を100％の幅と高さに設定してください

答えて

関連する問題