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. 

有一百万种不同的方法你可以采取，这只是一个。

希望有所帮助。