Question

我有一个表，其中一个单元格将接收比其他单元格更多的输入。我希望能够水平滚动 单元格，以便表格中的每个单元格都不会变大，以容纳该单元格内容。

<div class = "Table">
   <div class = "Row">
      <div class = "Cell">Name</div>
      <div class = "Cell">Info</div>
      <div class = "Cell">A lot of content, content, content, content, content</div>
      <div class = "Cell">Phone Number</div>
   </div>
</div>

以下是我不断获得的表格示例：

 +-----+-------+----------------------------------+
 | Jon | 45.45 | somecontent,      | xxx-xxx-xxxx |
 |     |       | somecontent,      |              |
 |     |       |   somecontent     |              |
 |     |       | ,somecontent      |              |
 +-----+-------+-------------------+--------------+

有什么方法可以让第三个单元格可滚动？所以无论放入多少输入，所有其他单元格都将保持畅通无阻？

这是我想要的一个例子：

+-----+-------+---------------------------------------------------+--------------+
| Jon | 45.45 | somecontent,somecontent,somecontent,somecontent.. | xxx-xxx-xxxx |
+-----+-------+<--------------------___SCROLLBAR____---------->---+--------------+

目前我的CSS没有什么特别之处：

 .Table{ display: table ; }
 .Row{display: table-row; }
 .Cell{display:table-cell ;}

这是一个jsfiddle： http://jsfiddle.net/DJXvD/

Answer 1

这是表格单元格显示的解决方法

http://jsfiddle.net/InferOn/5wbur/13/

<强> HTML

    <div class = "Table">
   <div class = "Row">
      <div class = "Cell">Name</div>
      <div class = "Cell">Info</div>
      <div class = "Cell scrollable">A lot of content, content, content, content, contentA lot of content, content, content, content, contentA lot of content, content, content, content, content</div>
      <div class = "Cell">Phone Number</div>
   </div>
    <div class = "Row">
      <div class = "Cell scrollable">A lot of content, content, content, content, contentA lot of content, content, content, content, contentA lot of content, content, content, content, content</div>
      <div class = "Cell">Name</div>
      <div class = "Cell">Info</div>
      <div class = "Cell">Phone Number</div>
   </div>
</div>

<强> CSS

.Table{ display: table ; }
 .Row{display: table-row; }
 .Cell{width:100px;display:inline-block;float:left;height:50px;border:1px solid red;}
.scrollable{ overflow-x:scroll; white-space:nowrap;}

Answer 2

这是我的解决方案：

<div class = "Table">
    <div class = "Row">
        <div class = "Cell">Name</div>
        <div class = "Cell">Info</div>
        <div class = "Cell"><span>A lot of content, content, content, content, content, 
                                  content, content, content, content...</span></div>
        <div class = "Cell">Phone Number</div>
    </div>
</div>

这是CSS：

.Table { 
    display: table ; 
    border-collapse:collapse;
}

.Row{
    display: table-row;
}

.Cell{
    display:table-cell;
    padding: 2px 5px;
    border: 1px solid red;
}

.Cell > span {
    white-space: nowrap;
    display: block;
    width: 200px;
    overflow-x: auto;
}

Answer 3

的jsfiddle：

http://jsfiddle.net/TyFWu/

CSS：

.Table {
    display: table;
}
.Row {
    display: table-row;
}
.Cell {
    width:100px;
    ddisplay:table-cell;
    float:left;
    padding: 10px;
    background: yellow;
    border: solid 1px black;
}
.test {
    overflow-x:scroll;
    white-space:nowrap;
}

HTML：

<div class="Table">
    <div class="Row">
        <div class="Cell">Name</div>
        <div class="Cell">Info</div>
        <div class="Cell test">A lot of content, content, content, content, contentA lot of content, content, content, content, contentA lot of content, content, content, content, content</div>
        <div class="Cell">Phone Number</div>
    </div>

您可以通过display:block;方式完成此操作，但高度会更长，并且无法正确对齐文本

演示：

http://jsfiddle.net/TyFWu/1/

Answer 4

另一种解决方案是重置block您想要滚动的div并设置正确的height或max-height。 DEMO 或 DEMO 2

div:nth-child(3) {
     display:block;
     height:3.2em;
     overflow:auto;
 }

或

 div:nth-child(3) {
     display:block;
     max-height:2.6em;
     overflow:auto;
 }

和横向滚动：http://jsfiddle.net/DJXvD/3/

试图创建一个可滚动的单元格？

4 个答案: