Różne szerokości td w różnych wierszach w tabelach?

Question

Szybkie pytanie: w jaki sposób można to osiągnąć? (Patrz zdjęcie poniżej)

Ustawianie td szerokość kabiny w zwykłym HTML i CSS nie miał wpływu.

Szerokość td MOŻE się różnić, ale tylko o tej samej szerokości dla każdego rzędu.

Answer 1

Użyj trzech oddzielnych bloków <table>, każdy z pojedynczym rzędem o trzech kolumnach o różnych szerokościach.

Answer 2

Nie wierzę, że może łatwo w jednym stole.

Zamiast tego należy użyć atrybutu colspan, aby pokrywać się z komórkami w różnych wierszach.

na przykład użyć 6 kolumn, pierwszy wiersz mają colspan = 2, td, colspan = 2

Drugi wiersz mają, TD colspan = 2, TD i tak dalej.

To dość brudny - może warto rozważyć wyświetlanie danych w inny sposób, na przykład za pomocą DIV

Answer 3

wziąć 1 główną tabelę z 3 tr iw każdym tr podjąć inną tabelę podrzędną z 3 kolumny niż zastosowanie css

Answer 4

To dużo dla oka, ale trzeba tabeli nadrzędnej z trzech rzędach, gdzie każdy wiersz zawiera inną tabelę z trzema kolumnami:

<table> 
    <tr> 
     <td> 
      <table> 
       <tr> 
        <!-- Set Width of Individual Cells Here --> 
        <td> 
        </td> 
        <td> 
        </td> 
        <td> 
        </td> 
       </tr> 
      </table> 
     </td> 
    </tr> 
    <tr> 
     <td> 
      <table> 
       <tr> 
        <!-- Set Width of Individual Cells Here --> 
        <td> 
        </td> 
        <td> 
        </td> 
        <td> 
        </td> 
       </tr> 
      </table> 
     </td> 
    </tr> 
    <tr> 
     <td> 
      <table> 
       <tr> 
        <!-- Set Width of Individual Cells Here --> 
        <td> 
        </td> 
        <td> 
        </td> 
        <td> 
        </td> 
       </tr> 
      </table> 
     </td> 
    </tr> 
</table> 

Oto a working jsFiddle to illustrate.

Answer 5

W rzeczywistości jest to możliwe bez tej podklady. Mam to teraz jako błąd w moim układzie. Wystarczy spróbować zabawy z uszczelek i marże wewnątrz komórek :(

„Bug” działa konsekwentnie w wielu przeglądarkach

Edit. Hunted że jeden

td { display: block; } 

nie rób tego w domu. ..