HTML表格+列寬

Question

所以我有一個表格，在我的頁面上設置爲40％的寬度。 2列

我想有一些50/50列拆分行和一些行25/75。

這是目前我對滿桌的造型：

table { 
 
    width: 40%; 
 
} 
 

 
td { 
 
    padding: 7px; 
 
} 
 

 
td.labelText { 
 
    vertical-align: middle; 
 
    text-align: right; 
 
    padding-right: 10px; 
 
    width: 50%; 
 
} 
 

 
td.editor { 
 
    padding-left: 7px; 
 
    width: 50%; 
 
} 
 

 
td.checklabelText { 
 
    vertical-align: middle; 
 
    text-align: right; 
 
    padding-right: 10px; 
 
    width: 75%; 
 
} 
 
td.checkeditor { 
 
    padding-left: 7px; 
 
    width: 25%; 
 
}

每當我設置<td>標籤類與75/25，表中的每一行還調整大小。我知道我正在做一些瑣碎的事情，但無法擺脫它的困擾！

任何幫助表示感謝，謝謝。

Answer 1

這就是表格的工作原理。

雖然你可以用colspan實現很多。

如果你總是有2 TD秒，在某些行，你可以有

/* Important */ 
 
td { 
 
    width: 25%; 
 
} 
 

 
/* for demo */ 
 
td { 
 
    /*for demo*/ 
 
    background: #eeeeaa; 
 
    text-align: center; 
 
} 
 

 
/* for demo */ 
 
table { 
 
    width: 100%; 
 
}

<table> 
 
    <thead> 
 
    <tr> 
 
     <th colspan="4">Treating the table as 4-column table</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td colspan="2">50 (colspan=2)</td> 
 
     <td colspan="2">50 (colspan=2)</td> 
 
    </tr> 
 
    <tr> 
 
     <td colspan="3">75 (colspan=3)</td> 
 
     <td colspan="1">25 (colspan=1)</td> 
 
    </tr> 
 
    </tbody> 
 
</table>

你也只能有一個TD與colspan設置爲你列的最大數量，然後在這個TD裏面，你可以有一個具有不同單元寬度的子表。

/* Important */ 
 
td.edit-75 { 
 
    width: 75%; 
 
} 
 
/* Important */ 
 
td.edit-25 { 
 
    width: 25%; 
 
} 
 

 

 
/* for demo */ 
 
td { 
 
    background: #eeeeaa; 
 
    text-align: center; 
 
} 
 

 
/* for demo */ 
 
table { 
 
    width: 100%; 
 
} 
 

 
/* for demo */ 
 
td.edit-75, td.edit-25 { 
 
    background: #99cc99; 
 
}

<table> 
 
    <thead> 
 
    <tr> 
 
     <th colspan="2">Keeping it as 2-column table</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td>50</td> 
 
     <td>50</td> 
 
    </tr> 
 
    <tr> 
 
     <td colspan="2"> 
 
     Do whatever you want here, ex: 
 
     <table> 
 
      <tbody> 
 
      <td class="edit-75">75</td> 
 
      <td class="edit-25">25</td> 
 
      </tbody> 
 
     </table> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td>50</td> 
 
     <td>50</td> 
 
    </tr> 
 
    </tbody> 
 
</table>

我經常使用的最後絕招時，有一個展開/摺疊行，展開時像顯示窗體或因此非表格數據。

Answer 2

表格列將始終對齊。您可能需要根據需要創建更加自定義的內容。

<table> 
    <tr> 
     <td><div class="w75">data</div><div class="w25">data</div></td> 
     <td><div class="w25">data</div><div class="w75">data</div></td> 
     etc. etc. 

有一百萬種不同的方法你可以採取，這只是一個。

希望有所幫助。