表中不同行中的不同td寬度？

快速提問：這怎麼能實現？（見下圖）表中不同行中的不同td寬度？

crazytable

設置在普通的HTML td寬度展臺並用CSS沒有影響。

td寬度可以改變，但只有每行的寬度相同。

來源

2011-12-01 iceteea

Obligatory comment：如果你需要這種佈局，可能不是需要在表格中的數據，而應該使用div。 –

這是什麼目的？表格是表格數據，我想象它很難看禁忌在一張表中看起來像這樣的數據。我可以建議你看看其他一些元素嗎？ ''s，也許？ – peirix

需要造型非常大的形式。 – iceteea

使用三個獨立的<table>塊，每塊有一行，每行有三列不同的寬度。

來源

2011-12-01 12:38:34

我不相信它可以輕鬆地在一張桌子上。

相反，您必須使用colspan屬性來重疊不同行上的單元格。

例如，使用6列中，第一行將具有列跨度= 2，TD，列跨度= 2

第二行將具有TD，TD列跨度= 2，TD等。

這是相當混亂 - 你可能要考慮以不同的方式顯示您的數據，例如，使用的DIV

來源

2011-12-01 12:38:59 dash

使用DIV是我的第一個想法，但我需要這個表造型巨大的形式，使用div會像使用上面的monstreus代碼一樣混亂。 – iceteea

謝謝。這是一個很好的解決方案。 – kta

取1和主表3 TR和每個TR採取另一個子表比採用3列CSS

來源

2011-12-01 12:41:03

這是一個很大看看，但你需要與其中每行都包含有三列另一個表三行父表：

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

這裏的a working jsFiddle to illustrate。

來源

2011-12-01 12:42:01

這實際上可能沒有這個子表格。我現在將這作爲佈局中的一個錯誤。只要嘗試用填充和利潤率細胞內:(

「錯誤」跨瀏覽器都能正常工作玩弄

編輯：追殺一個

td { display: block; }

在家裏不要這樣做。

來源

2012-06-16 23:30:21

這個答案可以使用一些嚴肅的說明。你是說顯示：塊解決了你的問題？追捕那個是什麼意思？請更清楚，不太聰明。 –

表中不同行中的不同td寬度？

回答

相關問題