CSS 溢出：auto 不适用于 table 或 tbody答案

【问题标题】：CSS overflow: auto is not working on table or tbodyCSS 溢出：auto 不适用于 table 或 tbody
【发布时间】：2015-01-24 06:18:11
【问题描述】：

http://jsfiddle.net/buL4y6w9/1/

上面是 jsFiddle，里面有很多乱七八糟的代码。

CSS 的某些属性显然被其他属性覆盖，我无法判断（使用 Chrome 的 开发者工具）是什么原因造成的。

我的实际 HTML 位于 Visual Studio ASP.NET 母版页中。我会发布它，但其中没有包含数据。

<div id="datagrids">
 <asp:DataGrid ID="RollupDG" OnItemDataBound="DataGridYear_ItemDataBound" runat="server" AutoGenerateColumns="False" CellPadding="4" ForeColor="#333333" GridLines="None">
  <AlternatingItemStyle BackColor="White" ForeColor="#284775" />
  <Columns>
    <asp:BoundColumn DataField="account" ItemStyle-HorizontalAlign="Left" Visible="True" />
    <asp:TemplateColumn HeaderStyle-HorizontalAlign="Left" ItemStyle-HorizontalAlign="Left">
      <ItemTemplate>
        <asp:LinkButton ID="btnShowGLdetail" runat="server" OnCommand="catGLdetail" CommandArgument='<%# DataBinder.Eval(Container.DataItem, "account") %>' CommandName="All" Text='<%# DataBinder.Eval(Container.DataItem, "acctRollupName") %>' />
      </ItemTemplate>
    </asp:TemplateColumn>
    <asp:TemplateColumn HeaderText="Jan" HeaderStyle-HorizontalAlign="Left" ItemStyle-HorizontalAlign="Left">
      <ItemTemplate>
        <asp:LinkButton ID="btnShowMonth1" runat="server" DataFormatString="{0:C}" OnCommand="catGLdetail" CommandArgument='<%# DataBinder.Eval(Container.DataItem, "account") %>' CommandName="1" Text='<%# DataBinder.Eval(Container.DataItem, "db_amount_01", "{0:C0}") %>' />
      </ItemTemplate>
    </asp:TemplateColumn>
    <asp:TemplateColumn HeaderText="Feb" HeaderStyle-HorizontalAlign="Left" ItemStyle-HorizontalAlign="Left">
      <ItemTemplate>
        <asp:LinkButton ID="btnShowMonth2" runat="server" DataFormatString="{0:C}" OnCommand="catGLdetail" CommandArgument='<%# DataBinder.Eval(Container.DataItem, "account") %>' CommandName="2" Text='<%# DataBinder.Eval(Container.DataItem, "db_amount_02", "{0:C0}") %>' />
      </ItemTemplate>
    </asp:TemplateColumn>
    <asp:TemplateColumn HeaderText="Mar" HeaderStyle-HorizontalAlign="Left" ItemStyle-HorizontalAlign="Left">
      <ItemTemplate>
        <asp:LinkButton ID="btnShowMonth3" runat="server" DataFormatString="{0:C}" OnCommand="catGLdetail" CommandArgument='<%# DataBinder.Eval(Container.DataItem, "account") %>' CommandName="3" Text='<%# DataBinder.Eval(Container.DataItem, "db_amount_03", "{0:C0}") %>' />
      </ItemTemplate>
    </asp:TemplateColumn>
    <asp:TemplateColumn HeaderText="Apr" HeaderStyle-HorizontalAlign="Left" ItemStyle-HorizontalAlign="Left">
      <ItemTemplate>
        <asp:LinkButton ID="btnShowMonth4" runat="server" DataFormatString="{0:C}" OnCommand="catGLdetail" CommandArgument='<%# DataBinder.Eval(Container.DataItem, "account") %>' CommandName="4" Text='<%# DataBinder.Eval(Container.DataItem, "db_amount_04", "{0:C0}") %>' />
      </ItemTemplate>
    </asp:TemplateColumn>
    <asp:TemplateColumn HeaderText="May" HeaderStyle-HorizontalAlign="Left" ItemStyle-HorizontalAlign="Left">
      <ItemTemplate>
        <asp:LinkButton ID="btnShowMonth5" runat="server" DataFormatString="{0:C}" OnCommand="catGLdetail" CommandArgument='<%# DataBinder.Eval(Container.DataItem, "account") %>' CommandName="5" Text='<%# DataBinder.Eval(Container.DataItem, "db_amount_05", "{0:C0}") %>' />
      </ItemTemplate>
    </asp:TemplateColumn>
    <asp:TemplateColumn HeaderText="Jun" HeaderStyle-HorizontalAlign="Left" ItemStyle-HorizontalAlign="Left">
      <ItemTemplate>
        <asp:LinkButton ID="btnShowMonth6" runat="server" DataFormatString="{0:C}" OnCommand="catGLdetail" CommandArgument='<%# DataBinder.Eval(Container.DataItem, "account") %>' CommandName="6" Text='<%# DataBinder.Eval(Container.DataItem, "db_amount_06", "{0:C0}") %>' />
      </ItemTemplate>
    </asp:TemplateColumn>
    <asp:TemplateColumn HeaderText="Jul" HeaderStyle-HorizontalAlign="Left" ItemStyle-HorizontalAlign="Left">
      <ItemTemplate>
        <asp:LinkButton ID="btnShowMonth7" runat="server" DataFormatString="{0:C}" OnCommand="catGLdetail" CommandArgument='<%# DataBinder.Eval(Container.DataItem, "account") %>' CommandName="7" Text='<%# DataBinder.Eval(Container.DataItem, "db_amount_07", "{0:C0}") %>' />
      </ItemTemplate>
    </asp:TemplateColumn>
    <asp:TemplateColumn HeaderText="Aug" HeaderStyle-HorizontalAlign="Left" ItemStyle-HorizontalAlign="Left">
      <ItemTemplate>
        <asp:LinkButton ID="btnShowMonth8" runat="server" DataFormatString="{0:C}" OnCommand="catGLdetail" CommandArgument='<%# DataBinder.Eval(Container.DataItem, "account") %>' CommandName="8" Text='<%# DataBinder.Eval(Container.DataItem, "db_amount_08", "{0:C0}") %>' />
      </ItemTemplate>
    </asp:TemplateColumn>
    <asp:TemplateColumn HeaderText="Sep" HeaderStyle-HorizontalAlign="Left" ItemStyle-HorizontalAlign="Left">
      <ItemTemplate>
        <asp:LinkButton ID="btnShowMonth9" runat="server" DataFormatString="{0:C}" OnCommand="catGLdetail" CommandArgument='<%# DataBinder.Eval(Container.DataItem, "account") %>' CommandName="9" Text='<%# DataBinder.Eval(Container.DataItem, "db_amount_09", "{0:C0}") %>' />
      </ItemTemplate>
    </asp:TemplateColumn>
    <asp:TemplateColumn HeaderText="Oct" HeaderStyle-HorizontalAlign="Left" ItemStyle-HorizontalAlign="Left">
      <ItemTemplate>
        <asp:LinkButton ID="btnShowMonth10" runat="server" DataFormatString="{0:C}" OnCommand="catGLdetail" CommandArgument='<%# DataBinder.Eval(Container.DataItem, "account") %>' CommandName="10" Text='<%# DataBinder.Eval(Container.DataItem, "db_amount_10", "{0:C0}") %>' />
      </ItemTemplate>
    </asp:TemplateColumn>
    <asp:TemplateColumn HeaderText="Nov" HeaderStyle-HorizontalAlign="Left" ItemStyle-HorizontalAlign="Left">
      <ItemTemplate>
        <asp:LinkButton ID="btnShowMonth11" runat="server" DataFormatString="{0:C}" OnCommand="catGLdetail" CommandArgument='<%# DataBinder.Eval(Container.DataItem, "account") %>' CommandName="11" Text='<%# DataBinder.Eval(Container.DataItem, "db_amount_11", "{0:C0}") %>' />
      </ItemTemplate>
    </asp:TemplateColumn>
    <asp:TemplateColumn HeaderText="Dec" HeaderStyle-HorizontalAlign="Left" ItemStyle-HorizontalAlign="Left">
      <ItemTemplate>
        <asp:LinkButton ID="btnShowMonth12" runat="server" DataFormatString="{0:C}" OnCommand="catGLdetail" CommandArgument='<%# DataBinder.Eval(Container.DataItem, "account") %>' CommandName="12" Text='<%# DataBinder.Eval(Container.DataItem, "db_amount_12", "{0:C0}") %>' />
      </ItemTemplate>
    </asp:TemplateColumn>
    <asp:BoundColumn DataField="annualBudget" DataFormatString="{0:C0}" HeaderText="Budget" HeaderStyle-HorizontalAlign="Left" ItemStyle-HorizontalAlign="Left" />
    <asp:BoundColumn DataField="YTD" DataFormatString="{0:C0}" HeaderText="YTD" HeaderStyle-HorizontalAlign="Left" ItemStyle-HorizontalAlign="Left" />
    <asp:BoundColumn DataField="Annualized" DataFormatString="{0:C0}" HeaderText="Annualized" HeaderStyle-HorizontalAlign="Left" ItemStyle-HorizontalAlign="Left" />
    <asp:BoundColumn DataField="OverUnder" DataFormatString="{0:C0}" HeaderText="Variance" HeaderStyle-HorizontalAlign="Left" ItemStyle-HorizontalAlign="Left" />
    <asp:BoundColumn DataField="account" ItemStyle-HorizontalAlign="Left" Visible="False" />
    <asp:BoundColumn DataField="acctRollupName" ItemStyle-HorizontalAlign="Left" Visible="False" />
    <asp:BoundColumn DataField="accountCategory" ItemStyle-HorizontalAlign="Left" Visible="False" />
  </Columns>
  <EditItemStyle BackColor="#999999" />
  <FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
  <HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
  <ItemStyle BackColor="#F7F6F3" ForeColor="#333333" />
  <PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" />
  <SelectedItemStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" />
</asp:DataGrid>
<!-- Datagrid containing quarterly GL data -->
<b><asp:Label ID="LabelAccount" runat="server" /></b>
<asp:DataGrid ID="QuarterDG" runat="server" AutoGenerateColumns="False" OnItemDataBound="DataGridQuarter_ItemDataBound" CellPadding="4" ForeColor="#333333" GridLines="None">
  <AlternatingItemStyle BackColor="White" ForeColor="#284775" />
  <Columns>
    <asp:BoundColumn DataField="account" ItemStyle-HorizontalAlign="Left" Visible="True" />
    <asp:TemplateColumn ItemStyle-HorizontalAlign="Left">
      <ItemTemplate>
        <asp:LinkButton ID="btnShowGLdetail" runat="server" OnCommand="catGLdetail" CommandArgument='<%# DataBinder.Eval(Container.DataItem, "account") %>' CommandName="All" Text='<%# DataBinder.Eval(Container.DataItem, "acctRollupName") %>' />
      </ItemTemplate>
    </asp:TemplateColumn>
    <asp:TemplateColumn HeaderText="Q1" HeaderStyle-HorizontalAlign="Left" ItemStyle-HorizontalAlign="Left">
      <ItemTemplate>
        <asp:LinkButton ID="btnShowQ1" runat="server" DataFormatString="{0:C}" OnCommand="catGLdetail" CommandArgument='<%# DataBinder.Eval(Container.DataItem, "account") %>' CommandName="Q1" Text='<%# DataBinder.Eval(Container.DataItem, "Q1", "{0:C0}") %>' />
      </ItemTemplate>
    </asp:TemplateColumn>
    <asp:TemplateColumn HeaderText="Q2" HeaderStyle-HorizontalAlign="Left" ItemStyle-HorizontalAlign="Left">
      <ItemTemplate>
        <asp:LinkButton ID="btnShowQ2" runat="server" DataFormatString="{0:C}" OnCommand="catGLdetail" CommandArgument='<%# DataBinder.Eval(Container.DataItem, "account") %>' CommandName="Q2" Text='<%# DataBinder.Eval(Container.DataItem, "Q2", "{0:C0}") %>' />
      </ItemTemplate>
    </asp:TemplateColumn>
    <asp:TemplateColumn HeaderText="Q3" HeaderStyle-HorizontalAlign="Left" ItemStyle-HorizontalAlign="Left">
      <ItemTemplate>
        <asp:LinkButton ID="btnShowQ3" runat="server" DataFormatString="{0:C}" OnCommand="catGLdetail" CommandArgument='<%# DataBinder.Eval(Container.DataItem, "account") %>' CommandName="Q3" Text='<%# DataBinder.Eval(Container.DataItem, "Q3", "{0:C0}") %>' />
      </ItemTemplate>
    </asp:TemplateColumn>
    <asp:TemplateColumn HeaderText="Q4" HeaderStyle-HorizontalAlign="Left" ItemStyle-HorizontalAlign="Left">
      <ItemTemplate>
        <asp:LinkButton ID="btnShowQ4" runat="server" DataFormatString="{0:C}" OnCommand="catGLdetail" CommandArgument='<%# DataBinder.Eval(Container.DataItem, "account") %>' CommandName="Q4" Text='<%# DataBinder.Eval(Container.DataItem, "Q4", "{0:C0}") %>' />
      </ItemTemplate>
    </asp:TemplateColumn>
    <asp:BoundColumn DataField="annualBudget" DataFormatString="{0:C0}" HeaderText="Budget" HeaderStyle-HorizontalAlign="Left" ItemStyle-HorizontalAlign="Left" />
    <asp:BoundColumn DataField="YTD" DataFormatString="{0:C0}" HeaderText="YTD" HeaderStyle-HorizontalAlign="Left" ItemStyle-HorizontalAlign="Left" />
    <asp:BoundColumn DataField="Annualized" DataFormatString="{0:C0}" HeaderText="Annualized" HeaderStyle-HorizontalAlign="Left" ItemStyle-HorizontalAlign="Left" />
    <asp:BoundColumn DataField="OverUnder" DataFormatString="{0:C0}" HeaderText="Variance" HeaderStyle-HorizontalAlign="Left" ItemStyle-HorizontalAlign="Left" />
    <asp:BoundColumn DataField="account" ItemStyle-HorizontalAlign="Left" Visible="False" />
    <asp:BoundColumn DataField="acctRollupName" ItemStyle-HorizontalAlign="Left" Visible="False" />
    <asp:BoundColumn DataField="accountCategory" ItemStyle-HorizontalAlign="Left" Visible="False" />
  </Columns>
  <EditItemStyle BackColor="#999999" />
  <FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
  <HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
  <ItemStyle BackColor="#F7F6F3" ForeColor="#333333" />
  <PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" />
  <SelectedItemStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" />
</asp:DataGrid>
<asp:Label ID="DetailSecurityNote" runat="server" Text="Note: This list contains only those transactions to which you are authorized." Visible="false" /><br />
<br />
<!-- Table container for detail GL filter like Excel autofilter -->
<table id="LawsonFilter" runat="server" style="border:1px solid; padding:0px; width:950px;">
  <tr id="row1" runat="server">
    <td id="cell1" runat="server" width="150" align="middle">
      Date: <asp:DropDownList ID="ddlDate" runat="server" OnSelectedIndexChanged="LawsonFilterEvent" AutoPostBack="true" />
    </td>
    <td id="cell2" runat="server" width="150" align="middle">
      Code: <asp:DropDownList ID="ddlCode" runat="server" OnSelectedIndexChanged="LawsonFilterEvent" AutoPostBack="true" />
    </td>
    <td id="cell3" runat="server" width="400" align="middle">
      Vendor: <asp:DropDownList ID="ddlCompany" runat="server" OnSelectedIndexChanged="LawsonFilterEvent" AutoPostBack="true" />
    </td>
  </tr>
</table>
<!-- Datagrid containing detail GL data -->
<asp:DataGrid ID="glDetailDG" runat="server" AutoGenerateColumns="False" Width="950px" AllowSorting="True" OnSortCommand="LawsonSortEvent" CellPadding="4" ForeColor="#333333" GridLines="None">
  <AlternatingItemStyle BackColor="White" ForeColor="#284775" />
  <Columns>
    <asp:BoundColumn DataField="transdate" DataFormatString="{0:MM/dd/yyyy}" SortExpression="transdate" HeaderText="Date" HeaderStyle-HorizontalAlign="Left" ItemStyle-HorizontalAlign="Left" />
    <asp:BoundColumn DataField="GLaccount" SortExpression="GLaccount" HeaderText="Account" HeaderStyle-HorizontalAlign="Left" ItemStyle-HorizontalAlign="Left" />
    <asp:BoundColumn DataField="accountDesc" SortExpression="GLaccount" HeaderText="Desc" HeaderStyle-HorizontalAlign="Left" ItemStyle-HorizontalAlign="Left" />
    <asp:BoundColumn DataField="company" SortExpression="company" HeaderText="Vendor" HeaderStyle-HorizontalAlign="Left" ItemStyle-HorizontalAlign="Left" />
    <asp:TemplateColumn HeaderText="Invoice" HeaderStyle-HorizontalAlign="Left" ItemStyle-HorizontalAlign="Left">
      <ItemTemplate>
        <asp:HyperLink ID="btnShowInvoice" NavigateUrl='<%# "Default.aspx?apinvoice="+DataBinder.Eval(Container.DataItem, "apinvoice")+"&vendornum="+DataBinder.Eval(Container.DataItem, "vendornum") %>' Text='<%# DataBinder.Eval(Container.DataItem, "apinvoice") %>' Target="_new" runat="server" />
      </ItemTemplate>
    </asp:TemplateColumn>
    <asp:BoundColumn DataField="amount" DataFormatString="{0:C}" HeaderText="Amount" HeaderStyle-HorizontalAlign="Left" ItemStyle-HorizontalAlign="Left" />
  </Columns>
  <EditItemStyle BackColor="#999999" />
  <FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
  <HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
  <ItemStyle BackColor="#F7F6F3" ForeColor="#333333" />
  <PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" />
  <SelectedItemStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" />
 </asp:DataGrid>
</div>

以上任何内容（我可以看到）都不会导致我的<table> 具有 开发人员工具 向我显示的 CSS 属性 display:inline-block;。

相反，我只是去了“查看源代码”并将其复制到那里，除了二进制 DLL。

在项目开始具有不同类型的 position 属性或直到某些 HTML 功能具有重叠的属性以抵消我正在尝试做的事情之前，我的 CSS 技能还可以。

有谁知道如何让顶部的 jsFiddle 链接中的表格有滚动条？我尝试在<table> 和<tbody> 控件中设置overflow:auto。开发者工具也在那里显示它，但 HTML 没有它。

我做错了什么？

【问题讨论】：

标签： html css asp.net

【解决方案1】：

您需要在包含 div 的 css 中包含：overflow: auto;，而不是表本身，如下所示：http://jsfiddle.net/puj64wrh/（很抱歉它是多么粗糙）。您还必须在容器中定义固定的宽度和高度，滚动条才能正常工作。

旁注：

“在项目开始具有不同类型的位置属性或某些 HTML 功能具有重叠的属性之前，我的 CSS 技能是可以的。”

您始终可以（我建议限制使用）使用带有值的“！important”来覆盖任何其他样式。这是一篇文章：

http://css-tricks.com/when-using-important-is-the-right-choice/

【讨论】：

我让它在你的例子中工作。当我将它添加到我的代码jsfiddle.net/buL4y6w9/3 时，它确实限制了宽度，但不限制高度......并且宽度上没有滚动条。
我在其中一些设置上也有!important，但它们显然是在错误的地方——它们没有用。
对不起，您还必须给它一个固定的宽度和高度，您可能希望使用最小和最大变化。这是一个简单的示例，我将更新我的答案以包含此信息：jsfiddle.net/buL4y6w9/4
您的版本可以工作，但我似乎无法让它在我的版本上工作。我看到您添加了 html{ height:100%; } 以及小的 width 和 height 部分。是否需要较小的 W & H 值才能使其正常工作？我必须让它填满显示屏。
忽略 HTML 高度。宽度和高度是必需的。不过，它们不必很小。我认为您可以忽略 HTML 高度——我现在可以移动，所以无法尝试。