2012-04-02 10 views
1

Ich muss sicherstellen, dass die Höhe des Headers der Tabelle festgelegt ist und die Breite basierend auf dem Header-Zelleninhalt angepasst wird. (Kopftext wird in maximal zwei Zeilen angezeigt) Wie können wir das mit Stilen tun? Außerdem möchte ich sicherstellen, dass die Breite der Tabellenzeilen gleich der Breite der Kopfzeile ist (d. H. Die Kopfzeile bestimmt die Breite).Feste Höhe und ändernde Breite für Header (HTML-Tabelle)

Hinweis: Gegenwärtig wird "Transaktionsabteilungseigentümer Aliasname" angezeigt. Es muss in zwei Zeilen kommen.

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

können Sie etwas Zeit verbringen und ein wenig die Frage Räume reparieren? – Aristos

Antwort

2

Sie größte Problem brechen wird.
Transaction Department Owner Alias Name
lässt jeden Raum „“ Pause in eine neue Zeile, aber
Transaction&nbsp;Department&nbsp;Owner&nbsp;Alias&nbsp;Name
den Satz zwingen wird, zusammen zu bleiben, als wenn ein einziges Wort.

Alles, was Sie tun müssen, ist ein reguläres Leerzeichen, wo Sie es brechen wollen, und verwenden Sie & nbsp; 's, wo Sie nicht wollen, dass es zu brechen, und Sie werden 2 oder weniger Zeilen haben. Verwenden Sie für genau 2 Zeilen einen Zeilenumbruch <br> anstelle eines Unterbrechungsraums "". Viel Glück.