Html Breite Problem. Ist es mit Colspan verwandt? Wie?

Question

Meine <td> Breite scheint aus irgendeinem Grund ignoriert zu werden, der mit den darüber liegenden Tabeldaten zusammenhängt, da es funktioniert, wenn ich alle Zeilen außer der Zeile lösche, die das Problem zu haben scheint.

Ich denke, es hat etwas mit den Colspans zu tun.
Ich sah diese Antwort colspan width issue, die davon spricht, wie Sie sich im Grunde vorstellen müssen, dass es unsichtbare Zellen in Ihrem Tisch gibt, aber ich habe das schon gemacht, aber vielleicht mache ich es falsch? Hier

ist die html

<table border="1" cellspacing="0" cellpadding="0" width="600"> 
    <tr> 
     <td id="IX991PI1" rowspan="1" colspan="3" width="412" height="81" ></td> 
     <td id="OW6DMR2F" rowspan="1" colspan="1" width="188" height="81" ></td> 
    </tr> 
    <tr> 
     <td id="RU5UW85Z" rowspan="1" colspan="3" width="412" height="66" ></td> 
     <td id="RGPQDOYK" rowspan="2" colspan="1" width="188" height="204" ></td> 
    </tr> 
    <tr> 
     <td id="67JXVSFB" rowspan="1" colspan="3" width="412" height="138" ></td> 
    </tr> 

    <tr> 
     <td id="AB6FD7D5" rowspan="1" colspan="1" width="145" height="67" ></td> 
     <td id="RU0G6BL8" rowspan="1" colspan="3" width="455" height="67" ></td> 
    </tr> 
    <tr> 
     <td id="0B0D4ZVN" rowspan="1" colspan="4" width="600" height="29" ></td> 
    </tr> 

    <!-- the problematic row --> 
    <tr> 
     <td id="V4GHN5BW" rowspan="1" colspan="2" width="242" height="100" ></td> 
     <td id="CK3PB3OT" rowspan="1" colspan="2" width="358" height="100" ></td> 
    </tr> 
</table> 

Hier wird ein Bild der Tabelle als es falsch ist, und wie sollte es aussehen

Soweit ich sehen kann, alle Breiten hinzufügen bis zu 600, und alle Colspans haben die richtige Menge, um die unsichtbaren Zellen im Auge zu behalten (insgesamt 4 Cols). In der Tat ist die problematische Reihe das, was es macht, dass es 4 Spalten gibt, also würde ich erwarten, dass es die volle Kontrolle darüber hat, wohin diese unsichtbare Linie geht, die alle oberen und unteren Reihen schneidet.

Ich kann an nichts anderes denken, das das Problem außer den Colspans verursachen könnte, also muss ich etwas falsch machen.

---

Bearbeiten- Auch diese E-Mails, so dass ich auf CSS und so begrenzt ...

Bearbeiten- ich Google Chrome wurde mit und nachdem es auf firefox es versucht, scheint kein Problem zu sein ?
Allerdings habe ich dann weitere Zeilen zur Tabelle hinzugefügt, um zu sehen, ob etwas in beiden Browsern nicht funktioniert, und ich bin schnell auf dieses Problem gestoßen.

Die unteren 4 Zeilen sind wo die Probleme beginnen (die erste ist die problematische Zeile von oben). Auch wenn diese Zeilen in ihre eigene Tabelle eingefügt werden, gibt es immer noch Probleme.

<table border="1" cellspacing="0" cellpadding="0" width="600" > 
    <tr> 
     <td id="5DPKU34O" rowspan="1" colspan="4" width="412" height="81" ></td> 
     <td id="XHK07WYR" rowspan="1" colspan="1" width="188" height="81" ></td> 
    </tr> 
    <tr> 
     <td id="5IP7MCTF" rowspan="1" colspan="4" width="412" height="66" ></td> 
     <td id="WO4JPVJ6" rowspan="2" colspan="1" width="188" height="204" ></td> 
    </tr> 
    <tr> 
     <td id="JLCGN4YY" rowspan="1" colspan="4" width="412" height="138" ></td> 
    </tr> 
    <tr> 
     <td id="RX6Q81VD" rowspan="1" colspan="1" width="145" height="67" ></td> 
     <td id="6YNA6379" rowspan="1" colspan="4" width="455" height="67" ></td> 
    </tr> 
    <tr> 
     <td id="4DIOQA09" rowspan="1" colspan="5" width="600" height="29" ></td> 
    </tr> 

    <!-- problem starts here --> 
    <tr> 
     <td id="0X3RX651" rowspan="1" colspan="2" width="242" height="50" ></td> 
     <td id="L1TLGZIX" rowspan="2" colspan="3" width="358" height="220" ></td> 
    </tr> 
    <tr> 
     <td id="U1BAFJFK" rowspan="1" colspan="2" width="242" height="170" ></td> 
    </tr> 
    <tr> 
     <td id="VPM6G120" rowspan="1" colspan="3" width="380" height="192" ></td> 
     <td id="LF6WV55J" rowspan="1" colspan="2" width="220" height="192" ></td> 
    </tr> 
    <tr> 
     <td id="DW95YX3T" rowspan="1" colspan="5" width="600" height="16" ></td> 
    </tr> 
</table> 

Hier ist ein Bild, das das Problem in Firefox und Chrome veranschaulicht.

Answer 1

die Breite der Tabellenspalten gesetzt, die colspans haben, ist die zuverlässigste Methode, um die Breite für jede Spalte <col> Elemente explizit mit einzustellen.
So weiß der Browser von Anfang an, welche Spalte welche Breite hat und wie viele Spalten es tatsächlich gibt!

Diese Methode hat auch den Vorteil, dass Sie die Breite nicht in jeder einzelnen Tabellenzelle angeben müssen. Dies ist effizienter in Bezug auf Bytes und weniger fehleranfällig in Bezug auf Tippfehler.

<table border="1" cellspacing="0" cellpadding="0"> 
 
    <col width="145"><col width="97"><col width="170"><col width="188"> 
 
    <tr> 
 
    <td id="IX991PI1" colspan="3" height="81"></td> 
 
    <td id="OW6DMR2F" height="81"></td> 
 
    </tr> 
 
    <tr> 
 
    <td id="RU5UW85Z" colspan="3" height="66"></td> 
 
    <td id="RGPQDOYK" rowspan="2" height="204"></td> 
 
    </tr> 
 
    <tr> 
 
    <td id="67JXVSFB" colspan="3" height="138"></td> 
 
    </tr> 
 

 
    <tr> 
 
    <td id="AB6FD7D5" height="67"></td> 
 
    <td id="RU0G6BL8" colspan="3" height="67"></td> 
 
    </tr> 
 
    <tr> 
 
    <td id="0B0D4ZVN" colspan="4" height="29"></td> 
 
    </tr> 
 

 
    <!-- the no longer problematic row --> 
 
    <tr> 
 
    <td id="V4GHN5BW" colspan="2" height="100"></td> 
 
    <td id="CK3PB3OT" colspan="2" height="100"></td> 
 
    </tr> 
 
</table>

nahm ich auch die Freiheit, alle colspan=1 und rowspan=1 Attribute zu entfernen, da diese nicht notwendig sind. Und das width Attribut auf der Tabelle selbst war auch überflüssig.

Getestet in Chrome und Mozilla, und es sieht auch in Thunderbird gut aus.

Answer 2

Versuchen Sie, die Breite in Ihrer td in Zeile problematischen Tag zu entfernen. Dies legt die maximale Breite für sein Kind fest.

<!-- the problematic row --> 
    <tr> 
     <td id="V4GHN5BW" rowspan="1" colspan="2" height="100" ></td> 
     <td id="CK3PB3OT" rowspan="1" colspan="2" height="100" ></td> 
    </tr>