时间戳

首页 > 解决方案 > 滚动条仅在表格的一个 TD 单元格中？

html - 滚动条仅在表格的一个 TD 单元格中？

问题描述

我正在为我的网站创建一个新布局，并且从表格开始。目前我的表格有一个相当简单的代码，你可以在这里看到它：（http://www.thelanternlight.com/misc/new01.html）

我试图在整个页面上没有滚动条，而只是在您在该页面上看到的蓝绿色单元格中只有一个垂直滚动条（其中写有 lowright 的那个）。这就是我的内容所在。

我面临的主要问题是我不想为我的表格或其单元格提供尺寸，因为我想使用 100% 的宽度和高度，以便它覆盖整个页面，无论用户有什么浏览器设置。如果可能的话，我只想在该青色 TD 单元格中单独添加一个溢出滚动条。

我还将提供我目前拥有的代码：

<table style="width:100%" height="100%" bgcolor="pink" cellspacing=0 cellpadding=0 class="alignment">
  <tr>
    <td align="left" bgcolor="red" colspan="2" height="150">topleft</td>
    <td align="right" bgcolor="yellow">topright</td>
  </tr>
  <tr>
    <td align="left" bgcolor="magenta" width="100">lowleft</td>
    <td align="center" bgcolor="blueviolet" width="100">lowcenter</td>
    <td align="center" bgcolor="teal">
      <div style="overflow-y:scroll; overflow-y:auto; width:100%">lowright &nbsp;
        <p>


      </div>
    </td>
  </tr>
</table>

标签： htmlscrollbar

解决方案

给那个单元格一个height或者它会随着内容的添加而不断增长，永远不会触发滚动：

<table style="width:100%" height="100%" bgcolor="pink" cellspacing=0 cellpadding=0 class="alignment">
<tr>
<td align="left" bgcolor="red" colspan="2" height="150">topleft</td>
<td align="right" bgcolor="yellow">topright</td>
</tr>
<tr>
<td align="left" bgcolor="magenta" width="100">lowleft</td>
<td align="center" bgcolor="blueviolet" width="100">lowcenter</td>
<td align="center" bgcolor="teal"><div style="overflow-y:auto;
  height: 100px; width:100%">lowright
&nbsp;
<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras accumsan eleifend enim, nec vestibulum risus dignissim sit amet. In hac habitasse platea dictumst. Maecenas at enim eu magna laoreet rhoncus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus ac pellentesque enim, at pulvinar orci. Phasellus quis vestibulum nunc. Etiam mattis nulla orci. Donec elementum odio lacus, quis tempus ante eleifend sit amet. Nam congue ut dui vitae eleifend.

Nulla convallis consectetur diam vitae pulvinar. Nam varius hendrerit rutrum. Quisque finibus mattis turpis at dignissim. Praesent hendrerit libero lacinia nibh sodales pretium. Etiam in massa lacinia, posuere lectus non, efficitur nisl. Donec ut turpis vel lectus consequat ornare non molestie nulla. Sed at ante id diam laoreet facilisis vitae et nunc. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nunc pulvinar, enim vitae hendrerit tincidunt, nibh libero egestas velit, mattis volutpat ante purus et nisi. Mauris feugiat, massa aliquet venenatis semper, ante lectus tempor orci, at tristique leo metus id magna. Sed vestibulum blandit orci, non facilisis felis mollis vel. Donec auctor tincidunt hendrerit. Donec sodales mollis consectetur. Nulla eget tristique felis, eget scelerisque massa. Aliquam nisi mi, feugiat eu ligula quis, dictum varius turpis. Praesent sed leo a dolor egestas rutrum vitae nec diam.
  </p>

</div>
</td>
</tr>
</table>

推荐阅读