流体表：需要时截断单元格内容，否则保持表格尽可能窄

Question

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

在桌面视图中（或内容很少），我希望表不来填充整个可用宽度，足以显示数据。列应具有单独的宽度，足以显示其内容。换句话说，如果可能的话，我想在桌子的右边有空白区域。

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

期望的结果：

我浏览了Stack Overflow等几个小时，我找到的大多数解决方案（例如1，2，3）都要求设置表的宽度，通常到100％，这对我的目的来说是不可取的。我看到有人提到将div元素放在td元素中，但没有例子，我也无法自己解决这个问题。

我不必使用table解决此问题，因此欢迎使用其他解决方案。

Answer 1

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

策略：

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

策略：

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

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

当页面加载后，在每个窗口调整大小，show()影子表，测量顶行中每个width的{​​{1}}，然后td影子表。然后将hide()值复制到可见表格中相应的width元素，这些元素必须已应用Chris Coyier's truncate。

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

奖金提示：

• 如果需要，使用td包装长单词，­使单词不被包装。这只能在影子表中应用。
• 由于Internet Explorer中的错误，在影子表中使用 更多单元格填充 - 否则，IE的可见表有时会比影子表略宽。

JavaScript（需要jQuery）：

1px

CSS：

<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>

样本表：

请注意使用.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; } 和­来指明您（不）希望文本截断的位置。

 

Answer 2

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