如何将列宽设置为尽可能小？

Posted 2023-03-06

【中文标题】如何将列宽设置为尽可能小？

【英文标题】：How to set column width to be as small as possible?

【发布时间】：2012-06-27 07:55:09

【问题描述】：

我正在尝试将最后三列设置为尽可能小，因为它们只是保存用于操作的图标/链接。

我还希望大文本列具有尽可能多的剩余宽度。

以下是我能够找到但对我不起作用的内容：

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

这个解决方案对我不起作用，因为我有多个列，我想占用尽可能多的空间，所以我不能将它们中的任何一个设置为 width = 100%。

force column size to smallest possible

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

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:"*";

所以按照优先顺序：

表格跨越父容器的整个宽度

最后三个图标/操作列要尽可能小而没有任何截断

具有“大”数据（类标题和描述）的列应尽可能多地占用剩余空间

具有“中等”数据的列应该是其内容的大小，两边都有一些边距（如果很难做到这一点，我不介意只扔一个固定的宽度）

我不需要 colgroup 和 col 标签，但我只是将它们留在这里以防它们有用。我尝试了使用和不使用它们的不同排列，但似乎仍然无法让它工作。我还考虑过对数据列使用百分比，但我希望浏览器根据实际内容确定宽度，而不是我强加可能不是最佳的预定义规则。

【问题讨论】：

width="*" 和 width="1*" 都是 width 属性的无效值。不要那样做。

【参考方案1】：

对于要缩小的列，将宽度设置为 1 px：

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。

【参考方案2】：

回答您的一项请求：

最后三个图标/操作列尽可能小 任何截止

为此，我将floattds 或将它们设置为display:inline-block;

如果您知道所用图标的大小，则可以在图标上方的th 上设置宽度（我称之为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/

需要额外的 6px 来填充我在示例中添加的边框位

注意：这些tds 会在屏幕变小时堆叠起来。

【讨论】：

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

再次感谢您抽出宝贵时间帮助我。 :-)