Wie XHTML "Tabelle" mit Fluid-Tabellenzeilen zu machen

Grundsätzlich möchte ich in der Lage sein, ein Raster von Feldern zu machen, wo ich Text an der oberen Mitte und unten von jedem Feld ausrichten kann, und die Felder in der gleichen Zeile haben Ändern Sie die Größe, wenn Text in einer anderen Box in seiner Zeile nach unten drückt.Wie XHTML "Tabelle" mit Fluid-Tabellenzeilen zu machen

Wenn Sie sich diesen HTML 4-Code anschauen, erreicht er, was ich möchte, aber ich möchte das mit dem XHTML 1.0-Doctype erreichen.

<style type="text/css"> 
<!-- 
#apDiv1 { 
     width:200px; 
     height:100%; 
      border:1px solid #000; 
} 

#apDiv1 table{ 
     width:200px; 
     height:100%; 
      border:1px solid #000; 
} 
--> 
</style> 
<div id="apDiv1"><table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0"> 
    <tr> 
    <td> 
    <table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0"> 
     <tr><td>blah</td></tr> 
     <tr><td height="100%">blah</td></tr> 
     <tr><td>blah</td></tr> 
    </table> 
    </td> 
    <td> 
    <table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0"> 
     <tr><td>blah</td></tr> 
     <tr> 
     <td height="100%"><p>blahfhfh</p> 
      <p>dfhdf</p> 
      <p>h</p> 
      <p>dfh</p> 
      <p>df</p> 
      <p>h</p> 
<p>&nbsp;</p></td></tr> 
     <tr><td>blah</td></tr> 
    </table> 
    </td> 
    <td> 
     <table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0"> 
     <tr><td>blah</td></tr> 
     <tr><td height="100%">blah</td></tr> 
     <tr><td>blah</td></tr> 
    </table> 
    </td> 
    </tr> 
    <tr> 
    <td><table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0"> 
     <tr> 
     <td>blah</td> 
     </tr> 
     <tr> 
     <td height="100%"><p>blahfhfh</p> 
      <p>dfhdf   </p> 
      <p>&nbsp;</p></td> 
     </tr> 
     <tr> 
     <td>blah</td> 
     </tr> 
    </table></td> 
    <td><table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0"> 
     <tr> 
     <td>blah</td> 
     </tr> 
     <tr> 
     <td height="100%">blah</td> 
     </tr> 
     <tr> 
     <td>blah</td> 
     </tr> 
    </table></td> 
    <td><table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0"> 
     <tr> 
     <td>blah</td> 
     </tr> 
     <tr> 
     <td height="100%">blah</td> 
     </tr> 
     <tr> 
     <td>blah</td> 
     </tr> 
    </table></td> 
    </tr> 
    <tr> 
    <td><table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0"> 
     <tr> 
     <td>blah</td> 
     </tr> 
     <tr> 
     <td height="100%">blah</td> 
     </tr> 
     <tr> 
     <td>blah</td> 
     </tr> 
    </table></td> 
    <td><table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0"> 
     <tr> 
     <td>blah</td> 
     </tr> 
     <tr> 
     <td height="100%">blah</td> 
     </tr> 
     <tr> 
     <td>blah</td> 
     </tr> 
    </table></td> 
    <td><table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0"> 
     <tr> 
     <td>blah</td> 
     </tr> 
     <tr> 
     <td height="100%">blah</td> 
     </tr> 
     <tr> 
     <td>blah</td> 
     </tr> 
    </table></td> 
    </tr> 
</table> 
</div>

Quelle

2009-06-03 VADiUM

Ihr Problem hängt überhaupt nicht mit XHTML zusammen. Es ist mehr von Quirks-Modus vs Standardmodus und (X) HTML Strict vs (X) HTML-Übergang. – Kornel

erste, das Dokument machen haben die DOCTYPE von HTML 4.01 strict und machen es zuerst validiert, mit http://validator.w3.org

dann können Sie die DOCTYPE ändern

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

und dann re- validiere es. Wenn es ein Problem oder Dinge gibt, die sich anders verhalten, können Sie hier nach der spezifischen Frage fragen.

Quelle

2009-06-03 07:42:52

Der hier angegebene Code wird aufgrund der eingestellten Höhe nicht validiert. – voyager

Es gibt a cross-browser way to achieve grid using CSS mit display:inline-block, aber es ist möglicherweise nicht so flexibel wie Sie möchten (und Code ist ziemlich hässlich, wenn Sie Firefox 2 unterstützen möchten).

Das Problem, das Sie möglicherweise mit "XHTML" haben, ist, dass CSS ohne Emulation von IE5-Fehlern (die Sie erhalten, wenn Sie DOCTYPE nicht verwenden oder eine alte/unvollständige verwenden) einschränkt, wenn Sie height:100% verwenden können.

Die Höhe in Prozent funktioniert nicht, wenn das übergeordnete Element die Höhe auto hat, und fast jedes HTML-Element hat standardmäßig die automatische Höhe. Sie müssen die explizite Höhe für alle übergeordneten Elemente der Tabelle festlegen:

html,body,#apDiv1 { 
    height:100%; 
}

Quelle

2009-06-07 18:34:01 Kornel

Wie XHTML "Tabelle" mit Fluid-Tabellenzeilen zu machen

Antwort

Verwandte Themen