如何设置列宽尽可能小？

我试图将最后三列设置得尽可能小，因为它们只是持有图标/操作链接。如何设置列宽尽可能小？

我还想让大型文本列具有尽可能多的剩余宽度。

这是我能找到，但对我没有工作：

Two columns table : one as small as possible, the other takes the rest

这种解决方案并不适合我，因为我有我想利用尽可能多的多个列尽可能的空间，所以我不能将它们中的任何一个设置为width = 100％。

我尝试使用相对长度（宽度=“*”），但是它似乎没有任何效果。也许这是因为我之前没有设置任何宽度，所以没有“剩余宽度”分配出去？

HTML：

<table> 
    <colgroup class='data' span='5'> 
    <col class='date' span='1'/> 
    <col class='id' span='1'/> 
    <col class='title' span='1'/> 
    <col class='status' span='1'/> 
    <col class='description' span='1'/> 
    </colgroup> 
    <colgroup class='action' span='3'> 
    <col class='show' span='1'/> 
    <col class='edit' span='1'/> 
    <col class='delete' span='1'/> 
    </colgroup> 
    <tr> 
    <th>Date</th> 
    <th>ID</th> 
    <th>Title</th> 
    <th>Status</th> 
    <th>Description</th> 
    <th colspan='3'></th> 
    </tr> 

    <tr> 
    <td class='date'>medium</td> 
    <td class='id'>medium</td> 
    <td class='title'>large</td> 
    <td class='status'>medium</td> 
    <td class='description'>large</td> 
    <td class='show'>small</td> 
    <td class='edit'>small</td> 
    <td class='delete'>small</td> 
    </tr> 
</table>

CSS：

table { 
    width: 100%; 
} 

table td.title, td.description { 
    text-align: left; 
} 

table td.date, td.id, td.status { 
text-align: center; 
} 

table td.show, td.edit, td.delete { 
} 

table colgroup.action col { 
    width:"1*"; 
} 

table colgroup.data col { 
    width:"*"; 
}

所以在优先顺序：

表格跨越父容器的整个宽度
最后THRE E图标/动作的列可尽可能小而没有任何截止
用“大”的数据（类标题和描述）应该采取尽可能多的剩余空间尽可能
列的列与“媒介”的数据应该是他们的内容与双方都有点距的大小（我不介意只是在一个固定的宽度抛出，如果是太难做到这一点）

我不需要colgroup和col标签，但我只是将它们留在这里以防万一它们有用。我尝试了不同的使用排列组合，但并未使用它们，但似乎无法使其发挥作用。我也想过使用数据列的百分比，但我希望浏览器根据实际内容确定宽度，而不是强加预定义的规则，这可能不是最优的。

来源

2012-06-26 A L

'width =“*”'和'width =“1 *”'都是width属性的无效值。不要这样做。 –

为了回答您的请求之一：

最后三个图标/动作列到尽可能小而不任何截止

要做到这一点，我会float的td小号或将它们设置为display:inline-block;

如果您知道所使用图标的大小，则可以设置宽度为th abov e图标（我会称之为class="icons"）。

如果你不知道宽度，你可以使用一些jQuery来计算。

var a = $('td.show').width(); 
var b = $('td.edit').width(); 
var c = $('td.delete').width(); 

$('.icons').css('width', a+b+c+6+"px");

例子：http://jsfiddle.net/KQs2K/1/

需要垫出我的例子

注扔边境位超6像素：当屏幕尺寸变实小，这些td旨意叠加。

来源

2012-06-26 02:42:48

感谢您的回复。这是一个非常快速和漂亮的jQuery脚本。我希望CSS能够做到这一点。 –

再次感谢您花时间帮助我。 :-) –

对于要缩小列，宽度设置为1个像素：

table { 
    width: 100%; 
} 

th, td { 
    border: 1px solid #eee; 
} 

td.title, td.description { 
    text-align: left; 
} 

td.date, td.id, td.status { 
    padding: 0 10px; 
    text-align: center; 
    width: 1px; 
} 

td.show, td.edit, td.delete { 
    width: 1px; 
}

然后你就可以摆脱colgroups干脆。

查看演示here。另外，您也可以考虑使用CSS flexible boxes。

来源

2015-09-16 16:52:59

如何设置列宽尽可能小？

回答

相关问题