自动适合某些列的HTML表格，其他列表的固定宽度 [英] HTML table with auto-fit for some columns, fixed width for others

问题描述

我试图创建一个符合以下要求的表：

1. 表格宽度必须定义为0 - 浏览器应该根据列的宽度计算宽度（这是为了容纳一个column-resize插件）。
   
2. 有些列可能会收到一个固定的宽度（例如50px）;
   
3. 未收到固定宽度的列必须自动适应内容。

我创建了一个< href =http://jsfiddle.net/sangil/HbARP/ =nofollow>小例子来说明问题 - 正如你可以看到第3列停留在宽度0处，所以不可见。 第三列出现，但固定宽度被忽略，所有列变成自动适合的。

HTML

 < table> 
< tr> 
< td class =cell headerid =header1> Header 1< / td> 
< td class =cell headerid =header2> Header 2< / td> 
< td class =cell headerid =header3> Header 3< / td> 
< / tr> 
< tr> 
< td class =cell> Cell 1< / td> 
< td class =cell> Cell 2< / td> 
< td class =cell>非常looooong内容< / td> 
< / tr> 
< / table> 
  

CSS

  table {
 table-layout：fixed; 
宽度：100％; 
 border：1px solid＃696969; 
} 
 
 .cell {
 color：＃898989; 
 border：1px solid＃888; 
 padding：2px; 
 overflow：hidden; 
} 
 
 .header {
 background-color：lightsteelblue; 
颜色：黑色; 
} 
 
＃header1，＃header2 {
 width：50px; 
} 
  

这甚至有可能吗？任何帮助将不胜感激...

解决方案

这是无法使用table-layout：fixed和表格宽度为0。

形成 W3 Spec第17.5.2.1节：

在固定表格布局算法中，每列的宽度为
，如下所示：

1. 'width'属性的值'auto'设置该列的宽度。


2. 否则，第一行中'width'属性值不是'auto'的单元格将确定该列的宽度。如果
   单元格横跨多个列，则宽度将被划分在
   列中。


3. 任何剩余列均等分隔剩余的水平表空间（减去边界或
   

但是，当您执行自动布局时（在17.5.2.2 ）您的宽度将被推送到与您的内容一起工作，并只使用尽可能提供的宽度。例如，如果每列的最小宽度总和超过表格的容器宽度，则所有内容都将被移动以适应独立于您设置的宽度的程度。

应该注意的是：

不需要实现UA这个算法在'table-layout'是'auto'的情况下确定表格布局;他们可以使用任何其他算法，即使它导致不同的行为。

所以看起来答案是不幸的是一个冗长的啰嗦不：（$ / b $ b

I'm trying to create a table adhering to the following requirements:

1. The table width must be defined as 0 - the browser should calculate the width according to the column widths (this is to accommodate a column-resize plugin).
2. Some columns may receive a fixed width (e.g. 50px);
3. Columns that do not receive a fixed width, must auto-fit to the content.

I have created a small example to illustrate the problem - as you can see column 3 stays at width 0 and so is not visible.

EDIT: If "table-layout: fixed" is removed. the third column appears, but the fixed widths are ignored and all columns become auto-fit.

HTML

<table>
<tr>
    <td class="cell header" id="header1">Header 1</td>
    <td class="cell header" id="header2">Header 2</td>
    <td class="cell header" id="header3">Header 3</td>
</tr>
<tr>
    <td class="cell">Cell 1</td>
    <td class="cell">Cell 2</td>
    <td class="cell">Very looooong content</td>
</tr>
</table>

CSS

table {
    table-layout: fixed;
    width: 100%;
    border: 1px solid #696969;
}

.cell {
    color: #898989;
    border: 1px solid #888;
    padding: 2px;
    overflow: hidden;
}

.header {
    background-color: lightsteelblue;
    color: black;
}

#header1, #header2 {
    width: 50px;
}

Is this even possible? Any help would be appreciated...

​

解决方案

It's not possible with table-layout: fixed and a width of 0 on your table.

Form the W3 Spec section 17.5.2.1:

In the fixed table layout algorithm, the width of each column is determined as follows:

1. A column element with a value other than 'auto' for the 'width' property sets the width for that column.
2. Otherwise, a cell in the first row with a value other than 'auto' for the 'width' property determines the width for that column. If the cell spans more than one column, the width is divided over the columns.
3. Any remaining columns equally divide the remaining horizontal table space (minus borders or cell spacing).

However, when you do the automatic layout (described in section 17.5.2.2) your widths will be pushed around to work with your content and only use the widths provided when possible. For instance, if the sum of the minimum widths of each column exceeds the container width of your table, everything will get shifted around to fit independent of what widths you set.

It should be also noted that:

UAs are not required to implement this algorithm to determine the table layout in the case that 'table-layout' is 'auto'; they can use any other algorithm even if it results in different behavior.

So it looks like the answer is a unfortunately a long-winded "no" :(

这篇关于自动适合某些列的HTML表格，其他列表的固定宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！