将滚动条添加到 HTM 文件中的特定 table

Question

我是 html 和 css 的新手，我的 .htm 文件如下所示：

<HTML>  
    <table border="0" height="406px" ID="Table1"
        style="WIDTH: 725px; HEIGHT: 406px">
        <tr>
            <td width="372px" height="20px" valign="top"><img src="StarsStartPage_SEET_1_1.png"
                    style="clip: rect(50px, 50px, 50px, 20px);"></td>
            <td width="480px" valign="top" height="20px"><FONT size="1" face="Arial">
                    <P><br>&nbsp;</P>
                    <P>&nbsp;</P>
                    <P>&nbsp;</P>
                </FONT>
                <table ID="Table2" border="0" bordercolor="white" width="443" height="52px" cellspacing="0"
                    cellpadding="2" style="WIDTH: 360px">
                    <tr>
                        <td id="openproject" width="100%" align="left" valign="middle">
                            <A href="urn:$$newproject"><IMG src="NewProject_Normal.png" height="36" width="155" border="0" style="Z-INDEX: 0"></A>
                            <font face="Arial" size="4" color="white">=</font>&nbsp;
                            <A href="urn:$$close"><IMG src="Continue_Normal.png" height="36" width="155" border="0" align="top"></A>
                        </td>
                    </tr>
                </table>
                <p style="MARGIN-RIGHT: 0px; width: 360px;" dir="ltr"><font face="Arial" size="4" color="black">&nbsp;&nbsp;&nbsp;&nbsp;Recently used Projects:<br></font></p>
                <table ID="plist" border="0" height="0" cellspacing="0" datasrc="#clicklist"
                    style="WIDTH: 360px; HEIGHT: 26px, overflow:auto">
                    <tr>
                        <td id="projline" width="100%" align="left" valign="middle" style="margin-left: 16px;"><font size="3" face="Arial">
                                <a id="proj" href="urn:a"><span datafld="Name"
                                style="padding-left: 20px; line-height: 26px;"></span></a></font>
                        </td>
                    </tr>
                </table>
                <table ID="plistgrey" border="0" height="0" cellspacing="0" datasrc="#greylist"
                    style="WIDTH: 360px; HEIGHT: 26px">
                    <tr>
                        <td id="projlinegrey" width="100%" align="left" valign="middle"><font size="3" face="Tahoma" color="DimGray">
                                <span style="margin-left: 20px;" datafld="Name"></span></font>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
</BODY>

如何为tabletableID="plist"添加专门的滚动条？我尝试了这一行：style="WIDTH: 360px; HEIGHT: 26px, overflow:auto"> 但它没有用。我应该将其更改为 div 样式吗？

Answer 1

如果您想在 div 中添加滚动条，请添加 overflow-y:scroll 并添加一个小于 div

的高度

CSS :

#plist{
  height:100px;
  overflow-y:scroll;
}

Answer 2

您必须将 table 包裹在 div 元素中才能使其正常工作：

CSS:

#list-wrapper{
    height: 150px; // For demo purposes, limit the height of the div
    overflow-y: scroll;
}

HTML:

<div id="list-wrapper">
  <table>
...
  </table>
<div>

Demo

此外，您的标记非常糟糕，但我现在找不到问题所在，您应该修复它，如果您遇到困难，请再开一个问题。

将滚动条添加到 HTM 文件中的特定 table

Add scrollbar to specific table inside HTM file

html

css

scrollbar

CSS:

HTML: