5

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

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

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

两列表：一个尽可能小，另一个占据其余部分

这个解决方案对我不起作用，因为我有多个列，我想占用尽可能多的空间，所以我不能将它们中的任何一个设置为宽度 = 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:"*";
}

所以按照优先顺序：

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

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

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

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

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

4

2 回答 2

3

对于要缩小的列，将宽度设置为 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 了。

在此处查看演示。

顺便说一句，您可以考虑改用CSS 灵活框。

于 2015-09-16T16:52:59.510 回答
0

回答您的一项请求：

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

为此，我会将s 或设置float为tddisplay: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 将堆叠。

于 2012-06-26T02:42:48.447 回答