CSS溢出：auto无法在table或tbody上运行

时间：2015-01-23 21:39:52

标签： html css asp.net

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属性显示：inline-block; 开发人员工具正在向我显示

Developer Tools

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

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

有谁知道如何在顶部的jsFiddle链接中获取表格以获得滚动条？我尝试在<table>和<tbody>控件中设置溢出：自动。开发人员工具也在那里显示它，但HTML没有它。

我做错了什么？

1 个答案:

答案 0 :(得分：1)

你需要在包含div的css中使用：overflow: auto;，而不是表本身，如下所示：http://jsfiddle.net/puj64wrh/（对不起有多粗糙）。您还必须在容器中定义固定的宽度和高度，以使滚动条起作用。

旁注：

“我的CSS技能是正常的，直到项目开始具有不同类型的位置属性，或者直到某些HTML功能具有重叠的属性来抵消我正在尝试做的事情。”

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

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

相关问题
最新问题