Html CSS溢出:自动在表格或tbody上不起作用

Html CSS溢出:自动在表格或tbody上不起作用,html,css,asp.net,Html,Css,Asp.net,上面是JSFIDLE,其中有很多看起来很混乱的代码 CSS的一些属性显然被其他属性覆盖了,我不知道(使用Chrome的开发工具)是什么导致了它 我的实际HTML位于Visual Studio的ASP.NET母版页中。我会贴出来,但里面没有数据 <div id="datagrids"> <asp:DataGrid ID="RollupDG" OnItemDataBound="DataGridYear_ItemDataBound" runat="server" AutoGener

上面是JSFIDLE,其中有很多看起来很混乱的代码

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>



日期: 代码: 小贩:
上面的任何内容(我可以看到)都不会导致我的
具有CSS属性display:inline块开发者工具向我展示了这一点

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

在项目开始具有不同类型的
position
属性之前,或者在某些HTML功能具有重叠属性(这些属性抵消了我正在尝试做的事情)之前,我的CSS技能是可以使用的

有人知道如何让顶部JSFIDLE链接中的表具有滚动条吗?我已尝试在
控件中设置溢出:auto。开发者工具也在那里展示了它,但是HTML没有


我做错了什么?您需要有:
溢出:自动在包含div的css中,而不是表本身,如下所示:(很抱歉它太粗糙了)。您还必须在容器中定义一个固定的宽度和高度,滚动条才能工作

旁注:

“我的CSS技能还可以,直到项目开始具有不同类型的位置属性,或者直到某些HTML功能具有重叠属性,从而抵消了我正在尝试的操作。”

您可以始终(我建议限制使用)使用带有值的“!important”来覆盖任何其他样式。以下是一篇关于这方面的文章:


我在你的例子中得到了成功。当我将它添加到我的代码中时,它确实限制了宽度,但没有限制高度…并且宽度上没有滚动条。我还有
!重要信息
在其中一些设置上,但它们显然位于错误的位置-它们没有任何用处。抱歉,您还必须为其指定固定的宽度和高度,您可能希望使用最小和最大变化。下面是一个简单的例子,我将更新我的答案以包含以下信息:您的版本可以工作,但我似乎无法让它在我的版本上工作。我看到您添加了
html{height:100%;}
以及小的宽度和高度部分。这项工作是否需要W&H的较小值?我必须让它填充显示。忽略HTML高度。宽度和高度是必需的。但它们不一定要小。我想你可以忽略HTML的高度——我现在是移动的,所以我不能尝试。