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

Question

我正在尝试将最后三列设置为尽可能小,因为它们只是保存动作的图标/链接.

我还希望大文本列尽可能多地保留剩余宽度.

这是我能找到的,但对我不起作用:

两列表:一列尽可能小,另一列则剩余

该解决方案不适合我,因为我有我想占用尽可能多的空间尽可能多列,所以我不能设置任何他们与宽度= 100%.

强制列大小到最小

我尝试使用相对长度(width ="*"),但它似乎没有任何影响.也许是因为我之前没有设置任何宽度,所以没有"剩余宽度"来分发？

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

所以按优先顺序排列:

• table跨越父容器的整个宽度

• 最后三个图标/动作列尽可能小,没有任何截止

• 具有"大"数据(类标题和描述)的列应占用尽可能多的剩余空间

• 带有"中等"数据的列应该是它们内容的大小,两边都有一些边距(我不介意只是投入一个固定的宽度,如果它太难实现)

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

Answer 1

回答您的一项请求：

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

为此，我将floatstd或将它们设置为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 来填充我在示例中放入的边框位

注意：td当屏幕尺寸变得非常小时，这些 s 将堆叠。