Question

我有一个令人沮丧的问题，我似乎无法解决。我有一个ASP.NET DataList，它最终被呈现为带有列和行的HTML <table>。此DataList也包含在具有列和行的HTML <table>中。

当页面呈现时，我的窗口大小调整为790x500，我的页脚横跨底部。整个页面看起来很棒。但是，此DataList 不调整较小的大小，并且包含从页脚扩展的高度，在主页面上创建滚动条。我真的需要DataList大约250px才能适应窗口。为了测试，我使用100px只是为了看看我是否可以调整大小。

无论我尝试什么，我都无法将这个渲染的<table>或周围的元素调整大小。我正在使用开发人员工具并在每个包含元素上将高度更改为100px，似乎没有任何东西缩小高度。我甚至尝试了服务器控件的Height property，但也没有用（宽度属性工作正常）。 DOM有点大，但这应该显示我所拥有的并且没有任何工作：

<div class="row-fluid">
  <div class="span12" style="height: 100px;">
    <table style="height: 100px;">
      <tbody style="height: 100px;">
         <tr style="height: 100px;">
            <td style="height: 100px;">
              <table style="width: 100%; height: 100px; overflow-x: hidden; overflow-y: scroll;">
                 <tbody style="height: 100px;">
                       <tr style="height: 100px;">
                           <td style="height: 100px;">
     The culprit is here-->   <table id="DataList1" style="width: 670px; height: 100px; border-top-style: inset; border-right-style: inset; border-bottom-style: inset; border-left-style: inset; border-collapse: collapse;" cellspacing="0">
                                   <tbody style="height: 100px;">

此时我使用标尺和包含DataList的表测量大约372px，远大于100px。 DataList似乎正在调整大小以适应其中的所有数据，但我无法在DOM远程372px中找到任何作为属性。即便如此，我尝试的一切都无法让高度缩小。

世界上我在这里做错了什么？

Answer 1

这里的解决方案是将DataList控件包装在<DIV>中以控制高度，而不是操纵所有周围的<table>元素块。这解决了问题，并允许根据需要设置控件的高度：

<div style="height: 190px; overflow-x: hidden; overflow-y: auto;">
    <asp:DataList ID="DataList1" runat="server"
                  Width="670px">
    ...
</div>

无法获取DataList HTML表格以调整高度属性的大小

1 个答案: