我怎样才能用table-layout设置两行表头的宽度：fixed？ [英] How can I set the widths of a two-row header table with table-layout: fixed?

问题描述

我想要的表格标题：

 < table class =tabel_op_panoustyle =margin：0px 2px 0px 2px ; width：99％; table-layout：fixed;> 
< tr> 
 th rowspan =2style =width：35％;> A< / th> 
< th colspan =2style =width：25％;> B< / th> 
< th colspan =3style =width：40％;> C< / th> 
< / tr> 
< tr> 
< th style =width：8％;> B1< / th> 
< th style =width：17％;> B2< / th> 
< th style =width：8％;> C1< / th> 
< th style =width：17％;> C2< / th> 
< th style =width：15％;> C3>< / th> 
< / tr> 
  

问题是无论如何设置宽度，第二行都保持不变。我尝试了百分比和固定的像素宽度。

从样式中删除表格布局似乎可行，但我需要固定布局。有没有办法做到这一点，而保持table-layout：fixed？

我希望布局最终看起来像 this but with table-layout：fixed /

解决方案

table-layout：fixed ：

表格和列的宽度由表格宽度和 col
元素设置，或者由第一个宽度一排细胞。
后续行中的单元格不会影响列宽。

所以，您可以像这样修改代码：

 < table class =tabel_op_panoustyle =margin：0px 2px 0px 2px; width：99％; border：1px solid gray;表格的布局：固定;> 
< col style =width：35％;/> 
< col style =width：8％;/> 
< col style =width：17％;/> 
< col style =width：8％;/> 
< col style =width：17％;/> 
< col style =width：15％;/> 
< tr> 
 th rowspan =2style =width：35％; border：1px solid gray;> A< / th> 
< th colspan =2style =width：25％; border：1px solid gray;> B< / th> 
< th colspan =3style =width：40％; border：1px solid gray;> C< / th> 
< / tr> 
< tr> 
< th style =width：8％; border：1px solid gray;> B1< / th> 
< th style =width：17％; border：1px solid gray;> B2< / th> 
< th style =width：8％; border：1px solid gray;> C1< / th> 
< th style =width：17％; border：1px solid gray;> C3< / th> 
< th style =width：15％; border：1px solid gray;> C4< / th> 
< / tr> 
< / table> 
  

查看演示： http://jsfiddle.net/rRJU7/2/

the table header I want:

<table class="tabel_op_panou" style="margin: 0px 2px 0px 2px; width: 99%; table-layout:fixed;">
<tr>
    <th rowspan="2" style="width: 35%;">A</th>
    <th colspan="2" style="width: 25%;">B</th>
    <th colspan="3" style="width: 40%;">C</th>
</tr>
<tr>
    <th style="width: 8%;">B1</th>
    <th style="width: 17%;">B2</th>
    <th style="width: 8%;">C1</th>
    <th style="width: 17%;">C2</th>
    <th style="width: 15%;">C3</th>
</tr>

The problem is no matter how I set the widths, the 2nd row stays the same. I tried percentages and fixed pixel widths.

Removing table-layout from the style seems to work but I need the fixed layout. Is there any way to do it while keeping "table-layout: fixed"?

I want the layout in the end to look something like this but with table-layout: fixed/

解决方案

table-layout:fixed:

Table and column widths are set by the widths of table and col elements or by the width of the first row of cells. Cells in subsequent rows do not affect column widths.

So, you can modify your code like this:

<table class="tabel_op_panou" style="margin: 0px 2px 0px 2px; width: 99%;border:1px solid grey;table-layout:fixed;">
    <col style="width: 35%;"/>
    <col style="width: 8%;"/>
    <col style="width: 17%;"/>
    <col style="width: 8%; "/>
    <col style="width: 17%;"/>
    <col style="width: 15%;"/>
<tr>
    <th rowspan="2" style="width: 35%; border:1px solid grey;">A</th>
    <th colspan="2" style="width: 25%; border:1px solid grey;">B</th>
    <th colspan="3" style="width: 40%; border:1px solid grey;">C</th>
</tr>
<tr>
    <th style="width: 8%; border:1px solid grey;">B1</th>
    <th style="width: 17%; border:1px solid grey;">B2</th>
    <th style="width: 8%; border:1px solid grey;">C1</th>
    <th style="width: 17%; border:1px solid grey;">C3</th>
    <th style="width: 15%; border:1px solid grey;">C4</th>
    </tr>
</table>

See demo: http://jsfiddle.net/rRJU7/2/

这篇关于我怎样才能用table-layout设置两行表头的宽度：fixed？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！