相关疑难解决方法(0)

如何设置表格单元格的最大高度？

我有一个固定宽度和高度的表格单元格,如果文本太大,单元格大小应该保持不变,文本应该由overflow:hidden隐藏.

div {
   display: table-cell
   height: 100px;
   width: 100px;
   overflow: hidden;
   vertical-align: middle;
}

Run Code Online (Sandbox Code Playgroud)

但是,如果添加太多文本,表格单元格将扩展到100px以上.任何阻止它扩展的技巧？

文本长度应为几行,因此"white-space:nowrap"解决方案不适用

html css css3

sky*_*red

2012 12-02

67
推荐指数

3
解决办法

9万
查看次数

CSS:约束一个具有长单元格内容到页面宽度的表格？

采用以下CSS + HTML:

<style>
    div.stuff {
        overflow: hidden;
        width: 100%;
        white-space: nowrap;
    }
    table { width: 100%; }
    td { border: 1px dotted black; }
</style>

<table>
    <tr><td>
        <div class='stuff'>Long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text</div>
    </td></tr>
</table>

Run Code Online (Sandbox Code Playgroud)

这会导致表增长以容纳整个长文本.(使浏览器窗口变小,看是否有很大的屏幕分辨率.)

我添加width: 100%并overflow: hidden指出长文本应该简单地删除,但似乎忽略了这一点.如何约束表/表格单元格/ div,使表格的宽度不超过文档的宽度？

(请不要评论使用表的优点.我确实显示表格数据,因此表的使用在语义上是正确的.另外请不要质疑切断文本的用户友好性;那里实际上是一个"扩展"按钮,允许用户查看完整的内容.谢谢!)

(编辑:我也试过max-width,但没有用.)

css

Tim*_*mwi

lucky-day

21
推荐指数

1
解决办法

1万
查看次数

如何设置<td>宽度以直观截断其显示的内容？

我正在尝试设置一个表的列宽,它可以正常工作,直到它到达子元素将被视觉截断的点...然后它将不会更小.("视觉截断" - 不适合似乎隐藏在下一列后面)

以下是一些示例代码来演示我的问题:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<script language="javascript" type="text/javascript">
    var intervalID = null;

    function btn_onClick()
    {
        // keep it simple, only click once
        var btn = document.getElementById("btn");
        btn.disabled = true;     
        // start shrinking
        intervalID = window.setInterval( "shrinkLeftCell();", 100);
    }

    function shrinkLeftCell()
    {
        // get elements
        var td1 = document.getElementById("td1");
        var td2 = document.getElementById("td2");

        // initialize for first pass
        if( "undefined" == typeof( td1.originalWidth))
        {
            td1.originalWidth = td1.offsetWidth;
            td1.currentShrinkCount = td1.offsetWidth;
        }

        // …

Run Code Online (Sandbox Code Playgroud)

html css html-table column-width column-sizing

Joh*_*yre

2016 09-16

20
推荐指数

1
解决办法

3万
查看次数

溢出:隐藏在填充后面

是否可以定义overflow:hidden基于填充开始的位置？

例如,我目前有一个表格,其中有一个长字符串.左边有填充,但是字符串的长度超过了td,因此触发了流出隐藏.我想溢出:隐藏在padding的开头而不是td的结尾触发.

基本上我想要溢出:隐藏在最右边的红线开始处.

.order-table td {
  padding: 1em 3px;
  border-left: #ddd 1px solid;
  font-size: 0.9em;
  overflow: hidden;
}

Run Code Online (Sandbox Code Playgroud)

css user-interface padding

dev*_*ebz

2015 10-15

6
推荐指数

1
解决办法

7187
查看次数

溢出不适用于td内的div

所以我试图让溢出属性为td中的div工作.但是,我以百分比的形式设置td的宽度.因此,我不能用固定的像素数设置div的宽度(在td内),因为我不会事先知道它.

<table id="table">
<thead>
    <tr> 
        <th>column 1</th>
        <th>column 2</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td><div class="cell">Aaaaaaaaaaaaaabbbbbbbbba</div></td>
        <td><div class="cell">bbbbbbbbbbbbbaaaaaaaaaaabb</div></td>
    </tr>
 </tbody>
</table>?


#table {
     width:100px !important;
}

th {
   width:16% !important;
   border: 1px solid black;
}

.cell{
    width:100%;
     overflow: hidden;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    -webkit-text-overflow: ellipsis;
    white-space: nowrap;
   }

Run Code Online (Sandbox Code Playgroud)

http://jsfiddle.net/2Sync/

有任何想法吗？!

非常感谢!

javascript css jquery css3 css-tables

abi*_*son

lucky-day

2
推荐指数

1
解决办法

4132
查看次数