16 Stimmen

Colspan auf einer Zelle in einer Zeile scheint die Einstellung der TD-Breite in allen anderen Zeilen zu verhindern. Warum?

Ich möchte eine Tabelle erstellen, die wie folgt aussieht:

+-----------------------------------------------------------+
|January 12th, 2012                                         |
+-----------------------------------------------------------+
| x | first item                 | second item              |
+-----------------------------------------------------------+
| x | first item                 | second item              |
+-----------------------------------------------------------+
|January 13th, 2012                                         |
+-----------------------------------------------------------+
| x | first item                 | second item              |
+-----------------------------------------------------------+
| x | first item                 | second item              |
+-----------------------------------------------------------+

aber was ich verstehe, ist dies:

+-----------------------------------------------------------+
|January 12th, 2012                                         |
+-----------------------------------------------------------+
| x            | first item           | second item         |
+-----------------------------------------------------------+
| x            | first item           | second item         |
+-----------------------------------------------------------+
|January 13th, 2012                                         |
+-----------------------------------------------------------+
| x            | first item           | second item         |
+-----------------------------------------------------------+
| x            | first item           | second item         |
+-----------------------------------------------------------+

Das "x" ist eigentlich ein Bild und hat eine feste Breite. Ich möchte die erste Zelle zwingen, nur so breit wie das Bild zu sein.

Hier ist ein Beispiel:

<html>
    <body>
        <table>
            <tbody>
                <tr>
                    <td colspan="3">January 12th 2011 this here is just for padding to make table wider</td>
                </tr>
                <tr>
                    <td width="20"> x </td>
                    <td>First item</td>
                    <td>Second item</td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

Es scheint, dass die Zeile, die die TD mit colspan=3 enthält, die TD in den anderen Zeilen veranlasst, das Attribut width zu ignorieren (ich habe auch versucht, style width:20px zu verwenden)

Das Rendering ist in FF8 korrekt. Irgendwelche Ideen, wie ich den IE dazu bringe, die Tabelle so darzustellen, wie ich es möchte?

23voto

paul Punkte 13038

Ich hatte vergessen, dass die Tabelle die Formatvorlage "table-layout: fixed" hat, und das war die Ursache für die Schwierigkeiten. Wenn diese Formatvorlage eingestellt ist, werden die Breiten der Zellen in der ersten Zeile auf alle folgenden Zeilen angewendet. Da die erste Zeile ein colspan enthielt, kam der IE wohl durcheinander (FF kommt damit klar).

Auf jeden Fall ist es nicht so flexibel, wie ich es mir gewünscht habe, aber für mich hat es funktioniert.

<html>
  <body>
  <div style="width:350px; border:blue 1px solid">
    <table border="0" style="font-family:Arial,Helvetica;font-size:10pt;table-layout:fixed;">
      <tr>
        <td style="width:17px;"/>
        <td style="width:20px;"/>
        <td style="width:180px;"/>
        <td style="width:130px;"/>
      </tr>
      <tr>
        <td colspan="4" style="width:100%;text-align:center;font-eight:bold;background-color:#eef;">09 January 2012</td>
      </tr>
      <tr title="09 January 2012">
        <td align="center" valign="middle" colspan="1" style="width:17px;height:1.1em;"><img src="../../../../_layouts/images/WebParts2010/AWT3_Klein.png" style="border-style:None;border-width:0px;height:1.1em;width:1.1em;" /></td>
        <td align="left" valign="top" colspan="1" style="width:20px;height:1.1em;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;">LO</td>
        <td align="left" valign="top" colspan="1" style="width:180px;height:1.1em;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;">Customer Name Ltd.</td>
        <td align="left" valign="top" colspan="1" style="width:120px;height:1.1em;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;">Reason for visiting today</td>
      </tr>
    </table>
  </div>
</body>
</html>

10voto

phils Punkte 182

Wie gefunden in diese Antwort können Sie die Attribute für die gesamte Tabelle über colgroup y col . Auf diese Weise können Sie individuelle Attribute auch für die (unsichtbaren einzelnen) Zellen innerhalb des colspan in der ersten Zeile festlegen.

In Ihrem Beispiel wäre das so:

<table>
  <colgroup>
    <col width="20" />
    <col />
    <col />
  </colgroup>
  <tbody>
    <tr>
      <td colspan="3">January 12th 2011 this here is just for padding to make table wider</td>
    </tr>
    <tr>
      <td> x </td>
      <td>First item</td>
      <td>Second item</td>
    </tr>
  </tbody>
</table>

Hier ist ein fiddle

0voto

Mr Lister Punkte 43862

Der IE behandelt die Breite von Tabellenzellen immer als Mindestbreite, zumindest bis zur Version 8 (ich weiß nichts über 9).

Der einzige Weg, den ich gefunden habe, um dies zu umgehen, ist entweder explizite Breiten für alle Tabellenzellen anzugeben oder Javascript zu verwenden, um die Breite nach dem Laden (aber vor der Anzeige) festzulegen.

-1voto

Daniel Hunter Punkte 2426

Ich würde vorschlagen, diesen Zellen eine Klasse zu geben und sie dann mit

<style>    
.td_class {width: 20px;}
</style>

CodeJaeger.com

CodeJaeger ist eine Gemeinschaft für Programmierer, die täglich Hilfe erhalten..
Wir haben viele Inhalte, und Sie können auch Ihre eigenen Fragen stellen oder die Fragen anderer Leute lösen.

Powered by:

X