2012-01-12 5 views
8

Chcę utworzyć tabelę, która wygląda tak:Wygląda na to, że colspan w komórce w jednym wierszu uniemożliwia ustawienie szerokości TD we wszystkich pozostałych wierszach. Czemu?

+-----------------------------------------------------------+ 
|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    | 
+-----------------------------------------------------------+ 

ale co mam to:

+-----------------------------------------------------------+ 
|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   | 
+-----------------------------------------------------------+ 

„x” jest w rzeczywistości obraz ma stałą szerokość. Chcę zmusić pierwszą komórkę, by była tak szeroka jak obraz.

Oto przykład:

<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> 

Wydaje się, że rząd zawiera TD z colspan = 3 jest przyczyną TD w innych rzędach ignorować atrybut szerokość (I próbował również za pomocą szerokości styl: 20 pikseli)

Renderowanie jest poprawne w FF8. Jakieś pomysły, w jaki sposób mogę uzyskać IE, aby renderować tabelę tak, jak chcę?

+3

Dziwne, co robisz wydaje się słuszna. Skopiowałem twój kod HTML i działa on dobrze dla mnie. Czy próbowałeś użyć Firebug, aby sprawdzić, czy być może model ma jakieś stylizacje, o których nie wiesz? –

+0

@Lex - masz rację. Po prostu skopiowałem go i wygląda dobrze w FF. Nadal jest jednak w IE! – paul

+0

Czy całkowita szerokość tabeli i szerokość pozostałych dwóch kolumn musi być dynamiczna, czy może być ustalona? –

Odpowiedz

17

Zapomniałam, że stół ma styl „table-layout: fixed” i to było przyczyną problemu. Po ustawieniu tego stylu szerokości komórek w pierwszym rzędzie zostaną zastosowane do wszystkich następnych wierszy. Ponieważ pierwszy wiersz zawierał colspan, wydaje mi się, że IE był zdezorientowany (FF radzi sobie z tym dobrze).

W każdym razie nie jest tak elastyczny, jak chciałem, ale to działało dla mnie.

<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> 
+0

Dzięki Bogu, że to przeczytałem ... nigdy bym tego nie zgadł. Pomyślałem, że oznaczało "słuchaj mojego stylu!" – carinlynchin

+0

Nie mogę tego zrobić wystarczająco. –

0

IE zawsze traktuje szerokość na komórkach tabeli jako min-szerokość, przynajmniej do wersji 8 (nie wiem o 9).

Jedynym sposobem, jaki znalazłem w tym przypadku, jest określenie jawnych szerokości we wszystkich komórkach tabeli lub użycie Javascript do ustawienia szerokości po wczytaniu (ale przed wyświetleniem).

-1

Proponuję dając tych komórek klasę, a następnie styl z

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

po prostu przeczytaj, że próbowałaś tego ... Dziwne, to działa dla mnie. moją jedyną sugestią byłoby określenie całkowitej szerokości stołu –

5

Jak znaleźć w this answer można ustawić atrybuty dla całej tabeli poprzez colgroup i col. W ten sposób możesz ustawić indywidualne atrybuty nawet dla (niewidocznych pojedynczych) komórek wewnątrz colspan w pierwszym rzędzie.

W przykładzie będzie to:

<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> 

Oto fiddle

+0

rock on. Dziękuję Ci. – catbadger

+0

Miałem ten sam problem. To była jedyna rzecz, która rozwiązała to dla mnie. – Allison

Powiązane problemy