发表新帖
发表新帖

Table cell widths - fixing width, wrapping/truncating long words

前端 未结
关注
7 2096
清酒与你
清酒与你 2021-02-01 02:07

I have a table containing cells with text of various lengths. It is essential that all of the table cells are of the same width. If this means truncating long words or forcing a

相关标签:
7条回答
  • 一生所求
    2021-02-01 02:34

    Try this:

    text-overflow: ellipsis; 
overflow: hidden; 
white-space:nowrap;
    0 讨论(0)
  • 没有蜡笔的小新
    2021-02-01 02:40 
    <style type="text/css">
td { word-wrap: break-word;max-width:50px; }            
</style>
    0 讨论(0)
  • 不要未来只要你来
    2021-02-01 02:45

    I realize you needed a solution for IE6/7 but I'm just throwing this out for anyone else.

    If you can't use table-layout: fixed and you don't care about IE < 9 this works for all browsers.

    td {
    overflow-x: hidden;
    overflow-y: hidden;
    white-space: nowrap;
    max-width: 30px;
}
    0 讨论(0)
  • 刺人心
    2021-02-01 02:47

    As long as you fix the width of the table itself and set the table-layout property, this is pretty simple :

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <style type="text/css">
        td { width: 30px; overflow: hidden; }
        table { width : 90px; table-layout: fixed; }
    </style>
</head>
<body>

    <table border="2">
        <tr>
            <td>word</td>
            <td>two words</td>
            <td>onereallylongword</td>

        </tr>
    </table>
</body>
</html>

    I've tested this in IE6 and 7 and it seems to work fine.

    0 讨论(0)
  • 情深已故
    2021-02-01 02:51

    try td {background-color:white}

    It just worked for a column I didn't want to get trampled by a previous column's long text.

    0 讨论(0)
  • 别那么骄傲
    2021-02-01 02:52

    Stack Overflow has solved a similar problem with long lines of code by using a DIV and having overflow-x:auto. CSS can't break up words for you.

    0 讨论(0)
 看不清?
提交回复
热议问题