我如何截断表格单元格，但适合尽可能多的内容?

弗雷德会面。他是一张桌子:

<table border="1" style="width: 100%;">
    <tr>
        <td>This cells has more content</td>
        <td>Less content here</td>
    </tr>
</table>

弗雷德的公寓有改变大小的奇怪习惯，所以他学会了隐藏一些他的内容，这样就不会把其他所有的单元都挤过去，把惠特福德夫人的客厅挤到被遗忘的地方:

<table border="1" style="width: 100%; white-space: nowrap; table-layout: fixed;">
    <tr>
        <td style="overflow: hidden; text-overflow: ellipsis">This cells has more content</td>
        <td style="overflow: hidden; text-overflow: ellipsis">Less content here</td>
    </tr>
</table>

这种方法很有效，但弗雷德有一种挥之不去的感觉，如果他的右细胞(他昵称为Celldito)让出一点空间，他的左细胞就不会经常被截断。你能挽救他的理智吗?

总之:表的单元格如何才能均匀溢出，并且只有在它们都放弃了所有空白的情况下才能溢出?

当前回答

我最近一直在研究它。检查这个jsFiddle测试，自己尝试改变基本表的宽度来检查行为)。

解决方案是将一个表嵌入到另一个表中:

<table style="width: 200px;border:0;border-collapse:collapse">
    <tbody>
        <tr>
            <td style="width: 100%;">
                <table style="width: 100%;border:0;border-collapse:collapse">
                    <tbody>
                        <tr>
                            <td>
                                <div style="position: relative;overflow:hidden">
                                    <p>&nbsp;</p>
                                    <p style="overflow:hidden;text-overflow: ellipsis;position: absolute; top: 0pt; left: 0pt;width:100%">This cells has more content</p>
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </td>
            <td style="white-space:nowrap">Less content here</td>
        </tr>
    </tbody>
</table>

Fred现在对Celldito的扩张满意吗?

2011-05-24 15:18:03

其他回答

我有同样的问题，但我需要显示多行(其中text-overflow:省略号;失败)。我解决它使用一个TD内的文本区域，然后样式它的行为像一个表格单元格。

    textarea {
        margin: 0;
        padding: 0;
        width: 100%;
        border: none;
        resize: none;

        /* Remove blinking cursor (text caret) */
        color: transparent;
        display: inline-block;
        text-shadow: 0 0 0 black; /* text color is set to transparent so use text shadow to draw the text */
        &:focus {
            outline: none;
        }
    }

2016-08-25 12:42:22

有一个更简单、更优雅的解决方案。

在你想要应用截断的表格单元格中，只需包含一个带有css table-layout: fixed的容器div。这个容器获取父表单元格的全部宽度，因此它甚至可以响应。

确保对表中的元素应用截断。

工作在IE8+

<table>
  <tr>
    <td>
     <div class="truncate">
       <h1 class="truncated">I'm getting truncated because I'm way too long to fit</h1>
     </div>
    </td>
    <td class="some-width">
       I'm just text
    </td>
  </tr>
</table>

和css:

    .truncate {
      display: table;
      table-layout: fixed;
      width: 100%;
    }

    h1.truncated {
      overflow-x: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

这是一个工作提琴 https://jsfiddle.net/d0xhz8tb/

2015-04-09 20:23:14

你可以设置右边单元格的宽度为所需宽度的最小值，然后应用overflow-hidden+text-overflow到左边单元格的内部，但是Firefox在这里有bug…

不过，flexbox似乎能帮上忙

2012-05-02 05:32:53

假定“表布局:固定”是基本的布局要求，这将创建均匀间隔的不可调整列，但您需要使单元格的百分比宽度不同，也许设置单元格的“colspan”为倍数?

例如，为了方便百分比计算，使用总宽度为100，并且假设您需要一个单元格为80%，另一个单元格为20%，考虑:

<TABLE width=100% style="table-layout:fixed;white-space:nowrap;overflow:hidden;">
     <tr>
          <td colspan=100>
               text across entire width of table
          </td>
     <tr>
          <td colspan=80>
               text in lefthand bigger cell
          </td>
          <td colspan=20>
               text in righthand smaller cell
          </td>
</TABLE>

当然，对于80%和20%的列，您可以将100%宽度的单元格colspan设置为5,80%宽度的单元格colspan设置为4,20%宽度的单元格colspan设置为1。

2011-04-17 04:27:17

使用一些css hack，似乎显示:table-column;可以来拯救:

.myTable { display: table; width: 100%; } .myTable:before { display: table-column; width: 100%; content: ''; } .flexibleCell { display: table-cell; max-width: 1px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } .staticCell { white-space: nowrap; } <div class="myTable"> <div class="flexibleCell">A very long piece of content in first cell, long enough that it would normally wrap into multiple lines.</div> <div class="staticCell">Less content</div> </div>

JSFiddle: http://jsfiddle.net/blai/7u59asyp/

2014-11-29 10:04:17

我如何截断表格单元格，但适合尽可能多的内容?

推荐文章

最新文章

标签