Question

我有一张桌子，我想给css＆＃34;溢出：滚动＆＃34;每个tr，但它不工作。这是我的代码。

HTML

<table>
<tr>
    <td>hai</td>
    <td>hellow</td>
    <td>shcjbjs</td>
    <td>dvkd</td>
</tr>
<tr>
    <td>hai</td>
    <td>hellow</td>
    <td>shcjbjs</td>
    <td>dvkd</td>
</tr>
<tr>
    <td>hai</td>
    <td>hellow</td>
    <td>shcjbjs</td>
    <td>dvkd</td>
</tr>
<tr>
    <td>hai</td>
    <td>hellow</td>
    <td>shcjbjs</td>
    <td>dvkd</td>
</tr>
</table>

CSS

table{
border:1px solid red;
}
td{
  border:1px solid blue;
  height:100px;
}
tr{
  height:50px;
  overflow-y:scroll;
}

我做了一个fiddle示例，请给我一个解决方案。

Answer 1

查看此工作演示 FIDDLE

table{
    border:1px solid red;
}
td{
    border:1px solid blue;
    height:100px;
}
tr{
    height:50px;
    overflow:scroll;
    display:block;
}

Answer 2

您可以在td

中尝试overflow:scroll;

Answer 3

您可以尝试CSS属性：

overflow: scroll;

或

overflow: auto;

同样，您也可以使用：

`overflow-y` if you want only a vertical scroll or
`overflow-x` if you want only a horizontal scroll

为行设置height并检查所有这些CSS属性的浏览器兼容性。

使用一组div代替表格以获得更好的结果

Answer 4

<tr>
  <td>your long content here</td>
</tr>

的CSS：

tr{
    height:50px;
    display:block;
    overflow-y:auto;overflow-x: hidden;    
}

FIDDLE http://jsfiddle.net/kemalemin/E2r2W/7/

Answer 5

table{
    border:1px solid red;
}
td{
    border:1px solid blue;
    height:100px;
}
tr{
    height:50px;
    overflow:scroll;
    display:block;
}

这可能会有所帮助，但我不确定这是否可以解决这个问题......

HTML如何使表的每一行都可滚动？

5 个答案: