首页 > 解决方案 > 如何防止表格调整大小?

问题描述

我觉得我什么都试过了。table-layout: fixed没用,vertical-align:top也没用,overflow: hidden...无论我做什么,我都无法阻止表格<EditItemTemplate>在我的页面上调整大小。我的代码:

HTML 和 CSS:

.main_table{
            height: 100%;
            width: 80%;
            background-color: transparent;
            /*border: 1px solid white;*/
            /*min-height: 61vh;*/
            padding: 0;
            border-collapse: collapse;
        }
        .album{
            width: 7.5vw;
            height: 7.5vw;
            border: 3px solid lightgray;
            margin-top: -10px;
        }
        .inside{
            width: 31.35vh;
            /*width:100%;*/
              height:30.4vh;
              max-height:30.4vh;
              max-width: 31.35vh;
              border:5px solid #fff;
              background:
                radial-gradient(farthest-side at top left    ,transparent 97%,#fff) bottom right,
                radial-gradient(farthest-side at top right   ,transparent 97%,#fff) bottom left,
                radial-gradient(farthest-side at bottom left ,transparent 97%,#fff) top right,
                radial-gradient(farthest-side at bottom right,transparent 97%,#fff) top left;
              background-size:30px 30px; /* adjust this */
              background-repeat:no-repeat;
              position: relative;
        }
        .border{
            /*border: 5px solid white;*/
        }
        #continuation{
            min-height: 39vh;
            background-color: white;
            width: 80%;
        }
        .behind{
            height: 61.4%;
            width: 79.85%;
            background-color: transparent;
            border: 1px solid white;
            min-height: 61vh;
            z-index: -1;
            position: absolute;
            top: -2px;
            right: 10.07vw;
            /*max-height: 61vh;*/
            border-collapse: collapse;
        }
        .squares{
            height: 28.2vh;
            width: 29.2vh;
            background-color: white;
            border-radius: 25px;
        }
        .special{
            /*border: 0px;
            padding-top: 4px;*/
        }
        .special2{
            border: 4px solid white;
        }
        .album_button{
            background-color: transparent;
              border: 3px solid #8B8B8B;
              color: #8B8B8B;
              padding: 6px 15px;
              text-align: center;
              display: inline-block;
              cursor: pointer;
              border-radius: 30px;
              outline: 0;
        }
        button > .img,
        button > span {
          vertical-align: middle;
        }
        .album_button:hover{
            border: 3px solid lightgray;
            color: lightgray;
        }
        .ID{
            font-size: 10px;
            color: gray;
            top: 0;
        }
        .above_ID{
            text-align: right;
            padding-right: 30px;
            padding-top: 2px;
        }
        .above_c{
            text-align:center;
             /*overflow: hidden;*/ 
        }
        .above_c_special{
            text-align:center;
            padding-bottom: 10px;
        }
<center>
      <asp:DataList ID="dtlproducts" runat="server" RepeatColumns="5" RepeatDirection="Horizontal" OnSelectedIndexChanged="dtlproducts_SelectedIndexChanged" OnCancelCommand="dtlproducts_CancelCommand" OnUpdateCommand="dtlproducts_UpdateCommand">
       <ItemTemplate>
       <table id="Table1" runat="server" CellPadding="0" cellspacing="0" GridLines="Both" HorizontalAlign="Center" Class="main_table">
       <tr Class="border">
            <td Class="border">
                <center>
                    <table class="inside">
                        <tr>
                          <td class="above_ID"><asp:Label ID="Label6" runat="server" Text="Id:" CssClass="ID"></asp:Label><asp:Label ID="lblid" runat="server" Text='<%# DataBinder.Eval(Container.DataItem,"Vinyl_ID") %>' CssClass="ID"></asp:Label></td>
                        </tr>
                        <tr>
                          <td class="above_c"><center><asp:Image ID="img" runat="server" CssClass="album" ImageUrl='<%# DataBinder.Eval(Container.DataItem,"Vinyl_Image","pics/{0}") %>'></asp:Image></center></td>
                        </tr>
                        <tr>
                          <td class="above_c"><asp:Label ID="Label7" runat="server" Text="Name:"></asp:Label><asp:Label ID="lblpname" runat="server" Text='<%# DataBinder.Eval(Container.DataItem,"Vinyl_Name") %>'></asp:Label></td>
                        </tr>
                        <tr>
                          <td class="above_c"><asp:Label ID="Label8" runat="server" Text="Price:"></asp:Label><asp:Label ID="lblprice" runat="server" Text='<%# DataBinder.Eval(Container.DataItem,"Vinyl_Price") %>'></asp:Label></td>
                        </tr>
                        <tr>
                          <td class="above_c"><asp:Label ID="Label9" runat="server" Text="Quantity:"></asp:Label><asp:Label ID="lblqua" runat="server" Text='<%# DataBinder.Eval(Container.DataItem,"Vinyl_Quantity") %>'></asp:Label></td>
                        </tr>
                        <tr>
                          <td class="above_c_special"><asp:Button ID="btnorder" runat="server" Text="ADD" CommandName="select" CssClass="album_button"><%--<div class="img"></div>--%><%--<span>ADD</span>--%></asp:Button></td>
                          </tr>
                      </table>
                    </center>
                    </td>
                  </tr>
            </table>
      </ItemTemplate>
      <EditItemTemplate>
         <table id="Table1" runat="server" CellPadding="0" GridLines="Both" HorizontalAlign="Center" CssClass="main_table">
            <tr Class="border">
              <td Class="border">
                <center>
                  <table class="inside">
                    <tr>
                      <td class="above_ID"><asp:Label ID="Label6" runat="server" Text="Id:" CssClass="ID"></asp:Label><asp:Label ID="lblid" runat="server" Text='<%# DataBinder.Eval(Container.DataItem,"Vinyl_ID") %>' CssClass="ID"></asp:Label></td>
                      </tr>
                      <tr>
                        <td class="above_c"><center><asp:Image ID="img" runat="server" CssClass="album" ImageUrl='<%# DataBinder.Eval(Container.DataItem,"Vinyl_Image","pics/{0}") %>'></asp:Image></center></td>
                      </tr>
                      <tr>
                        <td class="above_c"><asp:Label ID="Label7" runat="server" Text="Name:"></asp:Label><asp:Label ID="lblpname" runat="server" Text='<%# DataBinder.Eval(Container.DataItem,"Vinyl_Name") %>'></asp:Label></td>
                      </tr>
                      <tr>
                        <td class="above_c"><asp:Label ID="Label8" runat="server" Text="Price:"></asp:Label><asp:Label ID="lblprice" runat="server" Text='<%# DataBinder.Eval(Container.DataItem,"Vinyl_Price") %>'></asp:Label></td>
                      </tr>
                      <tr>
                        <td class="above_c"><asp:Label ID="Label9" runat="server" Text="Quantity:"></asp:Label><asp:Label ID="lblqua" runat="server" Text='<%# DataBinder.Eval(Container.DataItem,"Vinyl_Quantity") %>'></asp:Label></td>
                      </tr>
                      <tr>
                        <td class="above_c_special"><asp:Button ID="btnconfirm" runat="server" CommandName="Update" Text="CONFIRM" CssClass="album_button"></asp:Button>
                          <asp:Button ID="btncancel" runat="server" Text="CANCEL" CommandName="cancel" CssClass="album_button"></asp:Button>
                           <asp:DropDownList ID="drpqua" runat="server" CssClass="album_button">
                               <asp:ListItem>1</asp:ListItem>
                               <asp:ListItem>2</asp:ListItem>
                               <asp:ListItem>3</asp:ListItem>
                               <asp:ListItem>4</asp:ListItem>
                               <asp:ListItem>5</asp:ListItem>
                          </asp:DropDownList>
                      </td>
                  </tr>
                </tr>
             </table>
           </center>
        </td>
      </tr>
   </table>
</EditItemTemplate>
</asp:datalist>

我打开时的页面<ItemTemplate>(良好且工作正常,一切就绪): 在此处输入图像描述

我打开时的页面<EditItemTemplate>(边框调整大小,这使一切都移动了一点): 在此处输入图像描述

标签: htmlcssasp.net

解决方案


推荐阅读