如何为表格内包含DataList的单元格添加滚动条？

Got it, let's get that scrollbar working for your table cell. The core issue here is that table cells automatically expand to fit their content by default—so we need to set a fixed height and tell the browser to handle overflow with a scrollbar.

Step-by-Step Fix #

Add these two CSS properties to your <td> element's inline style:

• height: [your-desired-height] (e.g., 400px—adjust this to fit your layout)
• overflow-y: auto (this shows a vertical scrollbar only when content exceeds the cell's height; use overflow-y: scroll if you want the scrollbar to always be visible)

Here's your modified code with these changes included:

<td colspan="4" style="background-position: center center; border: medium groove #FFFFFF; background-image: none; background-repeat: no-repeat; height: 400px; overflow-y: auto;" rowspan="9"> 
    <asp:DataList ID="DataList1" runat="server" CellPadding="4" CssClass="auto-style38" ForeColor="#333333" Width="1110px"> 
        <AlternatingItemStyle BackColor="White" ForeColor="#284775" /> 
        <FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" /> 
        <HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" /> 
        <ItemStyle BackColor="#F7F6F3" ForeColor="#333333" /> 
        <ItemTemplate> 
            Professor: <asp:Label ID="Label2" runat="server" Text='<%# Eval("pu") %>'></asp:Label> <br /> 
            Title: <asp:Label ID="Label3" runat="server" Text='<%# Eval("tu") %>'></asp:Label> <br /> 
            Body:<asp:Label ID="Label4" runat="server" Text='<%# Eval("bu") %>'></asp:Label> 
        </ItemTemplate> 
        <SelectedItemStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" /> 
    </asp:DataList> 
</td>

Optional Improvements #

• Prevent horizontal overflow: If your DataList content has long unbroken text that causes horizontal scrolling, add overflow-x: hidden to the <td> style, or add word-wrap: break-word to your DataList's item styles to wrap long text.
• Use a CSS class (better practice): Instead of inline styles, define a reusable class for scrollable cells to keep your code clean:

  .scrollable-table-cell {
      height: 400px;
      overflow-y: auto;
      background-position: center center;
      border: medium groove #FFFFFF;
      background-image: none;
      background-repeat: no-repeat;
  }
  

  Then update your <td> to use this class:

  <td colspan="4" class="scrollable-table-cell" rowspan="9">
      <!-- Your DataList here -->
  </td>
  

内容的提问来源于stack exchange，提问作者Raghad