收件箱表格与Gmail - 固定行高

Question

我正在编写一个有角度的电子邮件应用，并在我的邮件模板中使用了引导表。 消息的主体很大，我想将其限制为一行，类似于gmail的做法。现在，我的单元格自动调整大小会增加整行的大小。我使用了几个角度过滤器来限制角色，但我不认为这就是Gmail的全部内容。对表行应用了某种溢出隐藏，并且每行的高度也是一致的。

如何调整我的表css，以便在单元格数据很多时行不会自动调整大小？

我的HTML代码：http://pastebin.com/13jd9Efq
我正在使用最新版本的bootstrap css。

Answer 1

我知道您需要overflow: hidden和white-space: nowrap个样式。如果您愿意，还可以添加text-overlow: ellipsis样式以获得良好效果。您可以使用table-layout: fixed忽略单元格内容的大小，只查看标题大小，否则自动列大小可以考虑字符串(fiddle)的整个宽度：

table.special { table-layout: fixed }

table.special th { width: 20% }

table.special th.content { width: 40% }

table.special td {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis
}

Answer 2

在<tr>代码上，您应添加style="width:[desired width]"，以便他们不会调整大小，例如：

<table class="table table-responsive table-striped table-hover">
    <thead>
    <tr>
        <th style="width: 100px">MessageID</th>
        <th style="width: 100px">Sender</th>
        <th style="width: 100px">Content</th>
        <th style="width: 100px">Date</th>
    </tr>
</thead>
    <tbody>
    <tr ng-click="changeRoute('mail',message)" ng-repeat="message in mails.messages | filter:search | orderBy:sortField:reverse">
        <td>ID</td>
        <td>Sender</td>
        <td>Content</td>
        <td>Date</td>
    </tr>
<tr ng-click="changeRoute('mail',message)" ng-repeat="message in mails.messages | filter:search | orderBy:sortField:reverse">
        <td>ID</td>
        <td>Sender</td>
        <td>Content</td>
        <td>Date</td>
    </tr>
</tbody>
</table>

您可以更改<td>代码的文字，但不会调整大小。您可能希望在<td>标记的左侧添加填充，以便它们与<tr>标记的文本更加“内联”。 DEMO