我怎样才能用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？

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

解决方案

：

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

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

查看演示：

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:

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？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！