2012-04-02 15 views
1

テーブルのヘッダーの高さを固定し、ヘッダーのセル内容に基づいて幅を調整する必要があります。 (ヘッダーテキストは最大2行で表示されます)スタイルを使用してどのように行うことができますか?また、テーブル行の幅がヘッダー行の幅と同じであることを確認します(ヘッダー行が幅を決定する)。ヘッダーの固定高さと幅を変更する(HTMLテーブル)

注:現在、「取引部門所有者の別名」という行があります。それは2つのラインで来る必要があります。

enter image description here

<!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="Styles/TestStyle.css" rel="stylesheet" type="text/css" /></head> 



<body> 


<div id = "divForTransactionGrid"> 

    <div> 

      <table cellspacing="0" rules="all" border="1" id="grdTransactions" style="border-collapse:collapse;"> 

          <thead> 

              <tr> 

                  <th scope="col">Transaction ID</th><th scope="col">Transaction Name</th><th scope="col">Transaction Owner</th><th scope="col">Transaction Department Owner Alias Name</th> 

              </tr> 

          </thead><tbody> 

              <tr> 

                  <td>1</td><td>TR1</td><td>Lijo</td><td>Lijo</td> 

              </tr><tr> 

                  <td>2</td><td>TR2</td><td>Lijo</td><td>This is a test value to test the result in real time scenario. Row width should be same as header width</td> 

              </tr> 

          </tbody> 

      </table> 

</div> 

</div> 





</body> 

</html> 

CSS

#divForTransactionGrid 

{ 

width: 300px; 

height: 250px; 

overflow:scroll; 

} 
+0

あなたは少し時間を費やして質問スペースを少し修正できますか? – Aristos

答えて

2

あなたの最大の問題は、破壊されます。
Transaction Department Owner Alias Name
しかし
Transaction&nbsp;Department&nbsp;Owner&nbsp;Alias&nbsp;Name
1つの単語かのように一緒に滞在する判決を強制する、新しい行に各スペース「」休憩をすることができます。

あなたがしなければならないことは、壊れたくない場所に1つの通常のスペースを残しておき、それが壊れたくない場合は2行以下になるように& nbsp;を使います。厳密に2行の場合は改行スペース ""の代わりに改行<br>を使用してください。運が良かった。

関連する問題