流体表：在需要时截断单元格内容，否则保持表格尽可能窄 [英] Fluid table: Truncate cell contents when needed, otherwise keep the table as narrow as possible

问题描述

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

I have an HTML 5 table with three rows and four columns (two attribute/value pairs per row) on a responsive page (Bootstrap).

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

In desktop view (or with little content), I would like the table not to fill the entire width available, just enough to show the data. Columns should have individual widths, just enough to show their content. In other words, I want white space to the right of the table, when possible.

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

In mobile view (or with lots of content), I would like the cell contents to truncate (e.g. using text-overflow: ellipsis;), not to wrap. If possible, I want the attribute columns to truncate first, to a pre-set minimum. It's OK without that prioritization if it can't be solved elegantly.

期望的结果：

我浏览了Stack Overflow等几个小时，我找到的大多数解决方案（例如 1 ， 2 ，3 要求要设置的表的宽度，通常为100％，这对我的目的来说是不合需要的。我看到人们提到在 td 元素中放置 div 元素，但没有示例，我无法我自己搞清楚。

I have browsed Stack Overflow etc. for several hours, and most solutions I find (e.g. 1, 2, 3) demands the width of the table to be set, often to 100%, which is undesirable for my purposes. I have seen people mentioning putting div elements inside td elements, but without examples, and I haven't been able to figure it out on my own.

我不需要使用 table 解决这个问题，所以其他的解决方案是欢迎。

I don't have to solve this using table, so other solutions are welcome.

推荐答案

好的，我找到了解决方案。 在这里摆弄。

OK, I found a solution. Fiddle here.

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

Use a hidden table to glean the desired cell widths of the visible table.

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

In addition to the table that the user shall see, a hidden "shadow" table, with identical content, must be created directly above the visible table.

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

The shadow table must allow the content to wrap inside the cells (this is default table behavior).

当页面加载并且每个窗口调整大小时， show（）影子表，测量宽度在顶行中的每个 td ，然后 hide（）影子表。然后将 width 值复制到可见表中相应的 td 元素，这些元素必须具有 Chris Coyier的truncate 已应用。

When the page has loaded and at every window resize, show() the shadow table, measure the width of every td in the top row, then hide() the shadow table. Then copy the width values to the corresponding td elements in the visible table, which must have Chris Coyier's truncate applied.

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

Works in all browsers I've tested, including mobile.

• 使用& shy; 在必要时包装长单词，并使用& nbsp; 来停止单词从包装。这只能在影子表中应用。


• 由于Internet Explorer中的错误，在影子表中使用 1px 更多单元格填充 - 否则，IE的可见表有时会比影子表略宽。

• Use ­ to wrap long words if necessary, and   to stop words from wrapping. This can be applied only in the shadow table.
• Use 1px more cell padding in the shadow table due to a bug in Internet Explorer - otherwise, IE's visible table sometimes becomes slightly wider than the shadow table.

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

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; 来表明你（不）想要的地方截断的文字。

Sample table:

Note use of ­ and   to indicate where you (do not) want the text to truncate.

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

这篇关于流体表：在需要时截断单元格内容，否则保持表格尽可能窄的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！