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

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

<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

其他回答

你可以试着“加权”某些列，像这样:

<table border="1" style="width: 100%;">
    <colgroup>
        <col width="80%" />
        <col width="20%" />
    </colgroup>
    <tr>
        <td>This cell has more content.</td>
        <td>Less content here.</td>
    </tr>
</table>

您还可以尝试一些更有趣的调整，如使用0%宽度的列和使用一些组合的白色空间CSS属性。

<table border="1" style="width: 100%;">
    <colgroup>
        <col width="100%" />
        <col width="0%" />
    </colgroup>
    <tr>
        <td>This cell has more content.</td>
        <td style="white-space: nowrap;">Less content here.</td>
    </tr>
</table>

你懂的。

2011-03-10 16:10:28

我有同样的问题，但我需要显示多行(其中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

检查“nowrap”是否在一定程度上解决了问题。注意:HTML5不支持nowrap

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

2011-03-10 06:32:14

我最近一直在研究它。检查这个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

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

在你想要应用截断的表格单元格中，只需包含一个带有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

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

推荐文章

最新文章

标签