0

我一直在尝试使用使用 <div></div> 创建的表格来解决问题，当单元格内的东西超出小尺寸时，我遇到了一个丑陋的问题。这里我举个例子：

<html>
    <head>
        <style type="text/css">
            div.table {
                display: table;
                width: 500px;
            }
            div.table div.row {
                display: table-row;
            }
            div.table div.row div {
                display: table-cell;
                border: 2px solid red;
            }
            #BOX {
                border: 5px solid green;
                overflow-x: scroll;
                overflow-y: hidden;
                width: 300px;
            }
            #TEXT {
                white-space: nowrap;
            }
        </style>
    </head>
    <body>
        <div class="table"><div class="row">
            <div>HELLO WORLD</div>
            <div id="BOX">
                <span id="TEXT">
                    aaaaaaaaaaaa aaaaaaaaaaaa
                </span>
            </div>
            <div>HELLO WORLD</div>
        </div></div>
    </body>
</html>

我需要的：

当“TEXT”的文本很短时，它看起来像这样： 格式正确

我不想要什么：

当 "TEXT" 的文本很长时，中央 <div> 会扩展，直到它可以容纳所有内容，并且表格也可以根据需要变宽。像这样： 不是我想要的

问题：

有谁知道我怎样才能让它工作？

注意：我只需要它水平滚动，“BOX”的宽度不能固定。

4

2 回答 2

1

http://jsfiddle.net/isherwood/3YEeH/

#TEXT {
    white-space: nowrap;
    max-width: 300px;
    display: inline-block;
    overflow-x: scroll;
}
于 2013-05-28T19:37:12.840 回答
0

试试这样的东西？它应该强制该单元格保持一定的宽度。

#TEXT { width: 150px;}

或者甚至...

#TEXT { max-width: 150px;}
于 2013-05-28T19:35:20.023 回答