colspan混合与固定宽度表 [英] colspan messes with fixed width table

问题描述

我想要一个包含1个小型和2个大型栏目的固定宽度表格：

  | .. | .. | .... | 
 | .. | .... | .... | 
 | .. | .... | .... | 
  

使用

  td.small {width：20％} 
 td.large {width：40％} 
  

$ b然后我要添加一个额外的大col colspan = 2像这样

  code> | ....... | .... | 
 | .. | .... | .... | 
 | .. | .... | .... | 
  

使用

  td.small {width：20％} 
 td.large {width：40％} 
 td.extralarge {width：60％} / * 20 + 40 = 60 * / 
  

---

但我最后得到：

  | ....... | .... | 
 | ... | ... | .... | 
 | ... | ... | .... | 
  
 
 
 
 
 
 
更多图形化示例。
解决方案
 $ c> colgroup 和 col 设置宽度：
 < table> 
< colgroup> 
< col class =short/> 
< col span =2class =long/> 
< / colgroup> 
< tr> 
< td>短< / td> 
< td> Long long long long< / td> 
< td> Long long long long< / td> 
< / tr> 
< tr> 
< td>短< / td> 
< td> Long long long long< / td> 
< td> Long long long long< / td> 
< / tr> 
< tr> 
< td>短< / td> 
< td> Long long long long< / td> 
< td> Long long long long< / td> 
< / tr> 
< / table> 
  
使用此CSS：
 
  table {width：100％; } 
 .short {
 background：lightblue; 
 width：20％
} 
 .long {
 background：lightgreen; 
 width：40％; 
} 
 .multiCells {background：＃F3A633; } 
  
这种方式你不需要给每个 td 一个类，当你想改变类名时，它更容易。 
 
 
 
   JSFiddle演示  
 
I want a fixed-width table with 1 small and 2 large columns like so:
|..|....|....|
|..|....|....|
|..|....|....|
using
td.small { width: 20% }
td.large { width: 40% }




Then I want to add an extra large col with colspan=2 like so
|.......|....|
|..|....|....|
|..|....|....|
using
td.small { width: 20% }
td.large { width: 40% }
td.extralarge { width: 60% } /* 20+40=60 */




But I keep ending up with:
|.......|....|
|...|...|....|
|...|...|....|




A more graphical example is found on jsbin



** edit **

Sorry, I missed one detail:
I must use (or so I think..?) table-layout: fixed since I'm having some special overflowing properties of the cells:
td {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
Updated jsbin found here.
解决方案
You could also use colgroup and col to set the width:
<table>
    <colgroup>
        <col class="short" />
        <col span="2" class="long" />
    </colgroup>
    <tr>
        <td>Short</td>
        <td>Long long long long</td>
        <td>Long long long long</td>
    </tr>
    <tr>
        <td>Short</td>
        <td>Long long long long</td>
        <td>Long long long long</td>
    </tr>
    <tr>
        <td>Short</td>
        <td>Long long long long</td>
        <td>Long long long long</td>
    </tr>
</table>
With this CSS:
table { width: 100%; }
.short {
    background: lightblue;
    width: 20%
}
.long {
    background: lightgreen;
    width: 40%;
}
.multiCells { background: #F3A633; }
This way you do not need to give every td a class, makes it easier when you want to change the classname. 

JSFiddle demo

                        
这篇关于colspan混合与固定宽度表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！