流体表：在需要时截断单元格内容，否则使表格尽可能窄答案

【问题标题】：Fluid table: Truncate cell contents when needed, otherwise keep the table as narrow as possible流体表：在需要时截断单元格内容，否则使表格尽可能窄
【发布时间】：2015-08-10 02:48:18
【问题描述】：

我在响应式页面 (Bootstrap) 上有一个包含三行四列（每行两个属性/值对）的 HTML 5 表格。

在桌面视图（或内容很少）中，我希望表格不填充可用的整个宽度，仅足以显示数据。列应该有单独的宽度，足以显示它们的内容。换句话说，如果可能，我希望表格右侧有空白。

在移动视图（或包含大量内容）中，我希望截断单元格内容（例如使用 text-overflow: ellipsis;），而不是换行。如果可能的话，我希望属性列首先截断到预设的最小值。如果不能优雅地解决，没有优先级也没关系。

期望的结果：

我已经浏览了 Stack Overflow 等几个小时，我发现的大多数解决方案（例如 1、2、3）都要求设置表格的宽度，通常为 100%，即不适合我的目的。我见过有人提到将div 元素放在td 元素中，但没有示例，我自己也无法弄清楚。

我不必使用table 来解决这个问题，所以欢迎使用其他解决方案。

【问题讨论】：

标签： html css overflow html-table

【解决方案1】：

尝试将div 放在td 中并使用Chris Coyier's truncate。另外，将 truncate 容器的width 设置为100% 以根据可用空间而不是固定宽度进行截断。

【讨论】：

您好阿明，感谢您的反馈。我测试了这个以及许多其他解决方案。你的建议，至少在我的测试中，是行不通的，因为一旦有 div 元素和 width:100% 在里面，table 就不会水平收缩。不过，Chris Coyier 的截断很有用。我找到了另一个解决方案，其中包括他的 CCS，并将其作为答案提交。

【解决方案2】：

好的，我找到了解决方案。 Fiddle here.

策略：

使用隐藏表格收集可见表格所需的单元格宽度。

战术：

除了用户应该看到的表格外，还必须在可见表格的正上方创建一个隐藏的“影子”表格，内容相同。

影子表必须允许内容包裹在单元格内（这是默认的table 行为）。

当页面加载完毕并且每次调整窗口大小时，show() 阴影表，测量顶行中每个td 的width，然后测量hide() 阴影表。然后将width 值复制到可见表中对应的td 元素中，该元素必须应用Chris Coyier's truncate。

适用于我测试过的所有浏览器，包括移动设备。

额外提示：

如有必要，使用&shy; 换行长字，&nbsp; 停止换行。这只能在影子表中应用。
由于 Internet Explorer 中的错误，在影子表中使用1px 更多单元格填充 - 否则，IE 的可见表有时会比影子表稍宽。

JavaScript（需要 jQuery）：

<script type="text/javascript">

function loadEvents() {
  initFluidTables();
}

// Resize fluid table(s)
function resizeFluidTables() {

  // Show source cells
  $( ".fluid-table-invisible-source" ).show(0);

  var fluidTableCellWidth = [];

  // Measure (normally invisible) source cells
  $( ".fluid-table-invisible-source td" ).each(function( index, value ) {
    fluidTableCellWidth[index] = $( this ).width();
  });

  // Resize (always visible) target cells. Adding 1 pixel due to apparent bug in Firefox.
  $( ".fluid-table-visible-target td>i" ).each(function( index, value ) {
    $( this ).css({'width': fluidTableCellWidth[index]+1 });
  });

  // Re-hide source cells
  $( ".fluid-table-invisible-source" ).hide();

}

// Create table(s) to be fluid
function initFluidTables() {

  // Create a container. Not really necessary, but keeps DOM tidier.
  $(".fluid-table").wrap( "<div></div>" );

  // This looks like a mess. What it does, is that .fluid-table duplicates itself, and each sibling gets a different class.
  $(".fluid-table").each(function() {
    $( this ).clone().appendTo( $( this ).addClass( "fluid-table-invisible-source" ).parent() ).addClass( "fluid-table-visible-target" );
  });

  // Add truncating element inside target cells
  $(".fluid-table-visible-target td").wrapInner( "<i></i>");

  // Truncate table contents at first drawing of the DOM and every time the window resizes
  resizeFluidTables();
  $( window ).resize(function() {
    resizeFluidTables();
  });
}
</script>

CSS：

.fluid-table td { padding-right: 5px; }

.fluid-table td:nth-child(odd) { color: #aaa; }

.fluid-table-visible-target td>i {
  font-style: inherit;
  white-space: nowrap;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* source slighly more padded than target due to IE bug */

.fluid-table-invisible-source td:nth-child(even) {
  padding-right: 10px;
}

.fluid-table-visible-target td:nth-child(even) {
  padding-right: 9px;
}

示例表：

注意使用&shy; 和&nbsp; 来指示您（不）希望在哪里截断文本。

<table class="fluid-table">
  <tr>
    <td>Avail&shy;able <i>until</i>:</td><td>No&nbsp;expiry date</td><td>Avail&shy;ability:</td><td>Worldwide</td><td></td>
  </tr><tr>
    <td>Year:</td><td>2016</td><td>Length:</td><td>29&nbsp;minutes</td><td></td>
  </tr><tr>
    <td>First broad&shy;cast:</td><td>Feb&nbsp;2</td><td>Last broad&shy;cast:</td><td>Feb&nbsp;3</td><td></td>
  </tr>
</table>

【讨论】：