So legen Sie das Breitenattribut der td-Zelle der Tabelle tr in HTML fest

Die Breite der Tabelle ist adaptiv und einige TDs haben eine feste Breite. Grundsätzlich sollte die Breite der Tabelle auf einen festen Wert eingestellt werden und nicht auf einen Wert, der sich je nach Bildschirm ändert. Sehen wir uns nun an, wie man die Breite der Tabellenzellen festlegt.

Beispiel 1: Die Breite der Tabelle beträgt 600 Pixel, und die Summe aller Breiten der Tabellenbreite beträgt weniger als 600 Pixel. Der Browser berechnet die Breite automatisch anhand des Verhältnisses der Breite von td

<table style="width: 600px;border-collapse: collapse;" >
            <tr>
               <td style="width: 200px;">我是200px</td>
               <td style="width: 200px;">我也是200px</td>
            </tr>
</table>
运行结果：两个td都是300px;

Die Breite der ersten beiden TDs beträgt bereits 600px, daher wird die Breite des dritten TD nicht angegeben Das dritte TD basiert auf dem Inhalt, und die Breite der ersten beiden TDs basiert auf der Berechnungsbreite der Verhältnisspalte.

Beispiel 2: Die ersten beiden tds sind kleiner als die Tabellenbreite, dann spielt das letzte td eine Vervollständigungsrolle

<table style="width: 600px;border-collapse: collapse;" >
            <tr>
                <td style="width: 300px;">我是200px</td>
                <td style="width: 300px;">我也是200px</td>
                <td >我是根据内容的</td>
            </tr>
</table>

Beispiel 3: Innerhalb des tds in der Tabelle, wenn das Blockelement vorhanden ist platziert mehr als Die Breite des td und das Tabellenlayout der Tabelle: fest (fest bedeutet, dass die Breite des td fest ist und sich mit der Änderung des td-Inhalts nicht ändert). Versuchen Sie auf diese Weise, overflow: auto; nicht in td zu schreiben, da in IE6 und 7 keine Bildlaufleisten angezeigt werden. Der beste Weg ist, ein Div mit einer Breite von 100 % einzuschließen

<table style="width: 600px;border-collapse: collapse;table-layout: fixed;" >
            <tr>
                <td style="width: 200px;"><div style="width: 100%;overflow: auto;"><div style="width: 300px;height: 100px;background-color: red;"></div></div></td>
               <td >我是自由宽度</td>
            </tr>
        </table>

Das obige ist der detaillierte Inhalt vonSo legen Sie das Breitenattribut der td-Zelle der Tabelle tr in HTML fest. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!