Question

我有这个表，我想稍微修改一下，但是尽管我在Stackoverflow中找到了解决方案，但我没有成功。

我正在使用PHP来回显表，其中一些数据来自SQL数据库。

正如您在右下角所见，浏览器没有看到我为溢出添加的样式等。

下面是html：

<div class="span9">
    <div class="container">
        <a class="btn" href="records.php">Add New Record</a><br><br>
        <table class="table table-hover table-condensed" border="1" cellpadding="10">
            <tbody>
                <tr> 
                    <th class="th.id"><a href="?orderby=id">ID</a></th> 
                    <th class="th.status"><a href="?orderby=status">Status</a></th> 
                    <th class="th.cust"><a href="?orderby=customer">Customer</a></th> 
                    <th class="th.prod"><a href="?orderby=product">Product</a></th> 
                    <th class="th.ord">Order Number</th> 
                    <th class="th.ret">Return Code</th> 
                    <th class="th.dop"><a href="?orderby=dop">Date of Purchase</a></th> 
                    <th class="th.sn">Serial Number</th> 
                    <th class="th.prob">Problem Description</th> 
                    <th class="th.rep">Repair Description</th> 
                    <th class="th.part">Parts Used</th> 
                    <th class="th.com">Comments</th> 
                </tr>
                <tr>
                    <td><p><a href="records.php?id=1">1</a></p></td>
                    <td><p>Error!</p></td>
                    <td><p>Jesse</p></td>
                    <td><p>Fuse</p></td>
                    <td><p></p></td>
                    <td><p></p></td>
                    <td><p></p></td>
                    <td><p>ComicalCanary</p></td>
                    <td><p>Not enough sand</p></td>
                    <td><p>Added sand</p></td>
                    <td><p>sand 10kg</p></td>
                    <td><p>I want to put a lot of content into this, to see how far this will go in stretching the table.</p></td>
                </tr>
        </tbody>
    </table>
</div>

以下是我的CSS，我正在使用Bootstrap 3.3.7，但这就是我要添加的内容：

.table {
    width: 100%;
    max-width: 100%;
    margin-bottom: 20px;
    table-layout: fixed;
}
.table td {
    width: 120px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

甚至宽度：120px;甚至不工作...... 有人提出任何线索吗？

Answer 1

设置td css的最大宽度或将div放在td中，省略号放在div上。或者将p宽度设置为固定数字，并将文本溢出规则放在其上。

表格单元在这方面有点困难，文本溢出在内联方向上与块元素（p，div等）一起使用。见https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow

Answer 2

您必须将ellipsis样式向下移动到p标记。

.table p {
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

https://jsfiddle.net/koralarts/y6q3uvkL/1/

Answer 3

将overflow: hidden;和text-overflow: ellipsis;从.table td移至.table td p的新规则，例如

.table td {
    width: 120px;
    white-space: nowrap;
}
.table td p {
    overflow: hidden;
    text-overflow: ellipsis;
}

以下是codepen中的全部内容：https://codepen.io/anon/pen/dJPgNZ

文本溢出：ellepsis无法正常工作

3 个答案: