2016-05-21 2 views
1

Wie Daten über <td> Tag inneren Tabelle anzeigen?Wie Daten über Tag inneren Tisch anzuzeigen?

von Code unten, wenn die Lastseite wird es zeigen, wie dieses Bild sein:

http://image.free.in.th/v/2013/ir/160521040137.png

Aber ich will 111 oben auf <td> Tag zeigen, wie dieses Bild:

http://image.free.in.th/v/2013/io/160521040244.png

Wie kann ich das tun? Ich habe alles versucht, aber es funktioniert nicht.

<table> 
    <tbody> 
     <tr> 
      <td style="width: 100px;-ms-word-wrap: break-word;word-wrap: break-word;-ms-word-break: break-word;word-break: break-word;word-break: break-all;padding-left: 10px;border: 1px solid #d0d0d0;text-align: center;">111</td> 
      <td style="width: 600px; -ms-word-wrap: break-word; word-wrap: break-word; -ms-word-break: break-word; word-break: break-word; word-break: break-all; padding-left: 10px; border: 1px solid #d0d0d0; "> 
dsgfdhgdffdsgfdhgdffdsgfdhgdffdsgfdhgdffdsgfdhgdffdsgfdhgdffdsgfdhgdffdsgfdhgdffdsgfdhgdffdsgfdhgdffdsgfdhgdffdsgfdhgdffdsgfdhgdffdsgfdhgdffdsgfdhgdffdsgfdhgdffdsgfdhgdffdsgfdhgdffdsgfdhgdffdsgfdhgdffdsgfdhgdffdsgfdhgdffdsgfdhgdffdsgfdhgdffdsgfdhgdffdsgfdhgdffdsgfdhgdffdsgfdhgdffdsgfdhgdffdsgfdhgdffdsgfdhgdffdsgfdhgdffdsgfdhgdffdsgfdhgdffdsgfdhgdfdsgfdhgdffdsgfdhgdffdsgfdhgdffdsgfdhgdffdsgfdhgdffdsgfdhgdffdsgfdhgdffdsgfdhgdffdsgfdhgdffdsgfdhgdffdsgfdhgdffdsgfdhgdffdsgfdhgdffdsgfdhgdffdsgfdhgdffdsgfdhgdffdsgfdhgdffdsgfdhgdffdsgfdhgdffdsgfdhgdffdsgfdhgdffdsgfdhgdffdsgfdhgdffdsgfdhgdffdsgfdhgdffdsgfdhgdffdsgfdhgdffdsgfdhgdffdsgfdhgdffdsgfdhgdffdsgfdhgdffdsgfdhgdffdsgfdhgdffdsgfdhgdffdsgfdhgdfdsgfdhgdffdsgfdhgdffdsgfdhgdffdsgfdhgdffdsgfdhgdffdsgfdhgdffdsgfdhgdffdsgfdhgdffdsgfdhgdffdsgfdhgdffdsgfdhgdffdsgfdhgdffdsgfdhgdffdsgfdhgdffdsgfdhgdffdsgfdhgdffdsgfdhgdffdsgfdhgdffdsgfdhgdffdsgfdhgdffdsgfdhgdffdsgfdhgdffdsgfdhgdffdsgfdhgdffdsgfdhgdffdsgfdhgdffdsgfdhgdffdsgfdhgdffdsgfdhgdffdsgfdhgdffdsgfdhgdffdsgfdhgdffdsgfdhgdffdsgfdhgdffdsgfdhgdf 
      </td>  
     </tr> 
     <tr> 
      <td style="width: 100px;-ms-word-wrap: break-word;word-wrap: break-word;-ms-word-break: break-word;word-break: break-word;word-break: break-all;padding-left: 10px;border: 1px solid #d0d0d0;text-align: center;">222</td> 
      <td style="width: 600px; -ms-word-wrap: break-word; word-wrap: break-word; -ms-word-break: break-word; word-break: break-word; word-break: break-all; padding-left: 10px; border: 1px solid #d0d0d0; "> 
dsgfdhgdffdsgfdhgdffdsgfdhgdffdsgfdhgdffdsgfdhgdffdsgfdh 
      </td>  
     </tr> 
    </tbody> 
</table> 
+0

Übrigens, benutzen Sie nicht '-ms-word-wrap'. IE selbst verwendet 'word-wrap' und kein anderer Browser unterstützt das' -ms-'Präfix. –

Antwort

1

Fügen Sie eine vertical-align:top; und Sie sind gut zu gehen.

Here's a fiddle mit diesem Zusatz.

Edit: Setzen Sie diese Inline-Code in eine Klasse und verwenden Sie es!

1

können Sie

<td style="...; vertical-align: top;">...</td> 
1

Hier verwenden Sie es mit dem Hinzufügen von CSS Klasse tun können

table td { 
    display: table-cell; 
    vertical-align: top; 
} 

kann dies ein für alle Mal <TD>...</TD> der Tabelle zu tun, Code hilft.