Html 如何拉伸每个TD以适应表格宽度

显示以下内容：

---

如何修改代码，以便显示最后三个DropDownList，并与每个TD的底部GridView宽度相匹配？

错误答案：您注意到，如果将宽度百分比相加，则会增加到表格大小的125%

好答案：修复宽度属性，使其总和达到100%

编辑：

---

如果你想你可以删除所有的宽度属性，这样它应该安排td，使他们都适合

因此，将这两个表都保持在100%，并从TDs中删除百分比？如果您想使它们的大小不同，请将值固定为100%

<asp:Panel runat="server" ClientIDMode="Static" ID="pnlScroll" CssClass="pnlScroll">

    <asp:UpdatePanel runat="server" ClientIDMode="Static" ID="TasksUpdatePanel" UpdateMode="Conditional">
        <ContentTemplate>
            <table class="taskGridView">
                <tr>
                    <td style="width: 25%;">
                        <asp:DropDownList ID="ddlTaskName" CssClass="chosen-select" DataSourceID="dsPopulateTaskName" AutoPostBack="true" DataValueField="Task Name" runat="server" Width="100%" Font-Size="11px" AppendDataBoundItems="true" OnSelectedIndexChanged="ddlTaskName_onSelectIndexChanged">
                            <asp:ListItem Text="All" Value="%"></asp:ListItem>
                        </asp:DropDownList>
                        <asp:SqlDataSource ID="dsPopulateTaskName" runat="server" ConnectionString="<%$ ConnectionStrings:gvConnString %>" SelectCommand="SELECT DISTINCT [ATTR2739] 'Task Name' FROM HSI.RMOBJECTINSTANCE1224 CT INNER JOIN HSI.RMOBJECTINSTANCE1232 S ON CT.ATTR2846 = S.ATTR2821 INNER JOIN HSI.USERACCOUNT UA ON S.FK2852 = (UA.USERNUM * -1) LEFT JOIN HSI.RMOBJECTINSTANCE1251 PXC ON PXC.FK2924 = CT.OBJECTID LEFT JOIN HSI.RMOBJECTINSTANCE1249 P ON PXC.FK2923 = P.OBJECTID LEFT JOIN HSI.RMOBJECTINSTANCE1248 PRXC ON PRXC.FK2912 = CT.OBJECTID LEFT JOIN HSI.RMOBJECTINSTANCE1230 PR ON PR.OBJECTID = PRXC.FK2911 LEFT JOIN HSI.RMOBJECTINSTANCE1247 SXC ON SXC.FK2908 = CT.OBJECTID LEFT JOIN HSI.RMOBJECTINSTANCE1229 SI ON SI.OBJECTID = SXC.FK2907 WHERE CT.ACTIVESTATUS = 0"></asp:SqlDataSource>
                    </td>
                    <td style="width: 20%;">
                        <asp:DropDownList ID="ddlService" CssClass="chosen-select" DataSourceID="dsPopulateService" AutoPostBack="true" DataValueField="Service" runat="server" Width="100%" Font-Size="11px" AppendDataBoundItems="true" OnSelectedIndexChanged="ddlService_onSelectIndexChanged">
                            <asp:ListItem Text="All" Value="%"></asp:ListItem>
                        </asp:DropDownList>
                        <asp:SqlDataSource ID="dsPopulateService" runat="server" ConnectionString="<%$ ConnectionStrings:gvConnString %>" SelectCommand="SELECT DISTINCT [ATTR2846] 'Service' FROM HSI.RMOBJECTINSTANCE1224 CT INNER JOIN HSI.RMOBJECTINSTANCE1232 S ON CT.ATTR2846 = S.ATTR2821 INNER JOIN HSI.USERACCOUNT UA ON S.FK2852 = (UA.USERNUM * -1) LEFT JOIN HSI.RMOBJECTINSTANCE1251 PXC ON PXC.FK2924 = CT.OBJECTID LEFT JOIN HSI.RMOBJECTINSTANCE1249 P ON PXC.FK2923 = P.OBJECTID LEFT JOIN HSI.RMOBJECTINSTANCE1248 PRXC ON PRXC.FK2912 = CT.OBJECTID LEFT JOIN HSI.RMOBJECTINSTANCE1230 PR ON PR.OBJECTID = PRXC.FK2911 LEFT JOIN HSI.RMOBJECTINSTANCE1247 SXC ON SXC.FK2908 = CT.OBJECTID LEFT JOIN HSI.RMOBJECTINSTANCE1229 SI ON SI.OBJECTID = SXC.FK2907 WHERE CT.ACTIVESTATUS = 0"></asp:SqlDataSource>
                    </td>
                    <td style="width: 10%;">
                        <asp:DropDownList ID="ddlStatus" CssClass="chosen-select" DataSourceID="dsPopulateStatus" AutoPostBack="true" DataValueField="Status" runat="server" Width="100%" Font-Size="11px" AppendDataBoundItems="true" OnSelectedIndexChanged="ddlStatus_onSelectIndexChanged">
                            <asp:ListItem Text="All" Value="%"></asp:ListItem>
                        </asp:DropDownList>
                        <asp:SqlDataSource ID="dsPopulateStatus" runat="server" ConnectionString="<%$ ConnectionStrings:gvConnString %>" SelectCommand="SELECT DISTINCT [ATTR2812] 'Status' FROM HSI.RMOBJECTINSTANCE1224 CT INNER JOIN HSI.RMOBJECTINSTANCE1232 S ON CT.ATTR2846 = S.ATTR2821 INNER JOIN HSI.USERACCOUNT UA ON S.FK2852 = (UA.USERNUM * -1) LEFT JOIN HSI.RMOBJECTINSTANCE1251 PXC ON PXC.FK2924 = CT.OBJECTID LEFT JOIN HSI.RMOBJECTINSTANCE1249 P ON PXC.FK2923 = P.OBJECTID LEFT JOIN HSI.RMOBJECTINSTANCE1248 PRXC ON PRXC.FK2912 = CT.OBJECTID LEFT JOIN HSI.RMOBJECTINSTANCE1230 PR ON PR.OBJECTID = PRXC.FK2911 LEFT JOIN HSI.RMOBJECTINSTANCE1247 SXC ON SXC.FK2908 = CT.OBJECTID LEFT JOIN HSI.RMOBJECTINSTANCE1229 SI ON SI.OBJECTID = SXC.FK2907 WHERE CT.ACTIVESTATUS = 0"></asp:SqlDataSource>
                    </td>
                    <td style="width: 15%;">
                        <asp:DropDownList ID="ddlDueDate" CssClass="chosen-select" DataSourceID="dsPopulateDueDate" AutoPostBack="true" DataValueField="Due Date" runat="server" Width="100%" Font-Size="11px" AppendDataBoundItems="true" OnSelectedIndexChanged="ddlDueDate_onSelectIndexChanged">
                            <asp:ListItem Text="All" Value="%"></asp:ListItem>
                        </asp:DropDownList>
                        <asp:SqlDataSource ID="dsPopulateDueDate" runat="server" ConnectionString="<%$ ConnectionStrings:gvConnString %>" SelectCommand="SELECT DISTINCT CONVERT(VARCHAR(14), [ATTR2752], 110) 'Due Date' FROM HSI.RMOBJECTINSTANCE1224 CT INNER JOIN HSI.RMOBJECTINSTANCE1232 S ON CT.ATTR2846 = S.ATTR2821 INNER JOIN HSI.USERACCOUNT UA ON S.FK2852 = (UA.USERNUM * -1) LEFT JOIN HSI.RMOBJECTINSTANCE1251 PXC ON PXC.FK2924 = CT.OBJECTID LEFT JOIN HSI.RMOBJECTINSTANCE1249 P ON PXC.FK2923 = P.OBJECTID LEFT JOIN HSI.RMOBJECTINSTANCE1248 PRXC ON PRXC.FK2912 = CT.OBJECTID LEFT JOIN HSI.RMOBJECTINSTANCE1230 PR ON PR.OBJECTID = PRXC.FK2911 LEFT JOIN HSI.RMOBJECTINSTANCE1247 SXC ON SXC.FK2908 = CT.OBJECTID LEFT JOIN HSI.RMOBJECTINSTANCE1229 SI ON SI.OBJECTID = SXC.FK2907 WHERE CT.ACTIVESTATUS = 0"></asp:SqlDataSource>
                    </td>
                    <td style="width: 15%;">
                        <asp:DropDownList ID="ddlOwner" CssClass="chosen-select" DataSourceID="dsPopulateOwner" AutoPostBack="true" DataValueField="Owner" runat="server" Width="100%" Font-Size="11px" AppendDataBoundItems="true" OnSelectedIndexChanged="ddlOwner_onSelectIndexChanged">
                            <asp:ListItem Text="All" Value="%"></asp:ListItem>
                        </asp:DropDownList>
                        <asp:SqlDataSource ID="dsPopulateOwner" runat="server" ConnectionString="<%$ ConnectionStrings:gvConnString %>" SelectCommand="SELECT DISTINCT [REALNAME] 'Owner' FROM HSI.RMOBJECTINSTANCE1224 CT INNER JOIN HSI.RMOBJECTINSTANCE1232 S ON CT.ATTR2846 = S.ATTR2821 INNER JOIN HSI.USERACCOUNT UA ON S.FK2852 = (UA.USERNUM * -1) LEFT JOIN HSI.RMOBJECTINSTANCE1251 PXC ON PXC.FK2924 = CT.OBJECTID LEFT JOIN HSI.RMOBJECTINSTANCE1249 P ON PXC.FK2923 = P.OBJECTID LEFT JOIN HSI.RMOBJECTINSTANCE1248 PRXC ON PRXC.FK2912 = CT.OBJECTID LEFT JOIN HSI.RMOBJECTINSTANCE1230 PR ON PR.OBJECTID = PRXC.FK2911 LEFT JOIN HSI.RMOBJECTINSTANCE1247 SXC ON SXC.FK2908 = CT.OBJECTID LEFT JOIN HSI.RMOBJECTINSTANCE1229 SI ON SI.OBJECTID = SXC.FK2907 WHERE CT.ACTIVESTATUS = 0"></asp:SqlDataSource>
                    </td>
                    <td style="width: 15%;">
                        <asp:DropDownList ID="ddlClient" CssClass="chosen-select" DataSourceID="dsPopulateClient" AutoPostBack="true" DataValueField="Client" runat="server" Width="100%" Font-Size="11px" AppendDataBoundItems="true" OnSelectedIndexChanged="ddlClient_onSelectIndexChanged">
                            <asp:ListItem Text="All" Value="%"></asp:ListItem>
                        </asp:DropDownList>
                        <asp:SqlDataSource ID="dsPopulateClient" runat="server" ConnectionString="<%$ ConnectionStrings:gvConnString %>" SelectCommand="SELECT DISTINCT [ATTR2799] 'Client' FROM HSI.RMOBJECTINSTANCE1224 CT INNER JOIN HSI.RMOBJECTINSTANCE1232 S ON CT.ATTR2846 = S.ATTR2821 INNER JOIN HSI.USERACCOUNT UA ON S.FK2852 = (UA.USERNUM * -1) LEFT JOIN HSI.RMOBJECTINSTANCE1251 PXC ON PXC.FK2924 = CT.OBJECTID LEFT JOIN HSI.RMOBJECTINSTANCE1249 P ON PXC.FK2923 = P.OBJECTID LEFT JOIN HSI.RMOBJECTINSTANCE1248 PRXC ON PRXC.FK2912 = CT.OBJECTID LEFT JOIN HSI.RMOBJECTINSTANCE1230 PR ON PR.OBJECTID = PRXC.FK2911 LEFT JOIN HSI.RMOBJECTINSTANCE1247 SXC ON SXC.FK2908 = CT.OBJECTID LEFT JOIN HSI.RMOBJECTINSTANCE1229 SI ON SI.OBJECTID = SXC.FK2907 WHERE CT.ACTIVESTATUS = 0"></asp:SqlDataSource>
                    </td>
                    <td style="width: 15%;">
                        <asp:DropDownList ID="ddlSite" CssClass="chosen-select" DataSourceID="dsPopulateSite" AutoPostBack="true" DataValueField="Site" runat="server" Width="100%" Font-Size="11px" AppendDataBoundItems="true" OnSelectedIndexChanged="ddlSite_onSelectIndexChanged">
                            <asp:ListItem Text="All" Value="%"></asp:ListItem>
                        </asp:DropDownList>
                        <asp:SqlDataSource ID="dsPopulateSite" runat="server" ConnectionString="<%$ ConnectionStrings:gvConnString %>" SelectCommand="SELECT DISTINCT [ATTR2819] 'Site' FROM HSI.RMOBJECTINSTANCE1224 CT INNER JOIN HSI.RMOBJECTINSTANCE1232 S ON CT.ATTR2846 = S.ATTR2821 INNER JOIN HSI.USERACCOUNT UA ON S.FK2852 = (UA.USERNUM * -1) LEFT JOIN HSI.RMOBJECTINSTANCE1251 PXC ON PXC.FK2924 = CT.OBJECTID LEFT JOIN HSI.RMOBJECTINSTANCE1249 P ON PXC.FK2923 = P.OBJECTID LEFT JOIN HSI.RMOBJECTINSTANCE1248 PRXC ON PRXC.FK2912 = CT.OBJECTID LEFT JOIN HSI.RMOBJECTINSTANCE1230 PR ON PR.OBJECTID = PRXC.FK2911 LEFT JOIN HSI.RMOBJECTINSTANCE1247 SXC ON SXC.FK2908 = CT.OBJECTID LEFT JOIN HSI.RMOBJECTINSTANCE1229 SI ON SI.OBJECTID = SXC.FK2907 WHERE CT.ACTIVESTATUS = 0"></asp:SqlDataSource>
                    </td>
                    <td style="width: 15%;">
                        <asp:DropDownList ID="ddlPractice" CssClass="chosen-select" DataSourceID="dsPopulatePractice" AutoPostBack="true" DataValueField="Practice" runat="server" Width="100%" Font-Size="11px" AppendDataBoundItems="true" OnSelectedIndexChanged="ddlPractice_onSelectIndexChanged">
                            <asp:ListItem Text="All" Value="%"></asp:ListItem>
                        </asp:DropDownList>
                        <asp:SqlDataSource ID="dsPopulatePractice" runat="server" ConnectionString="<%$ ConnectionStrings:gvConnString %>" SelectCommand="SELECT DISTINCT [ATTR2817] 'Practice' FROM HSI.RMOBJECTINSTANCE1224 CT INNER JOIN HSI.RMOBJECTINSTANCE1232 S ON CT.ATTR2846 = S.ATTR2821 INNER JOIN HSI.USERACCOUNT UA ON S.FK2852 = (UA.USERNUM * -1) LEFT JOIN HSI.RMOBJECTINSTANCE1251 PXC ON PXC.FK2924 = CT.OBJECTID LEFT JOIN HSI.RMOBJECTINSTANCE1249 P ON PXC.FK2923 = P.OBJECTID LEFT JOIN HSI.RMOBJECTINSTANCE1248 PRXC ON PRXC.FK2912 = CT.OBJECTID LEFT JOIN HSI.RMOBJECTINSTANCE1230 PR ON PR.OBJECTID = PRXC.FK2911 LEFT JOIN HSI.RMOBJECTINSTANCE1247 SXC ON SXC.FK2908 = CT.OBJECTID LEFT JOIN HSI.RMOBJECTINSTANCE1229 SI ON SI.OBJECTID = SXC.FK2907 WHERE CT.ACTIVESTATUS = 0"></asp:SqlDataSource>
                    </td>
                    <td style="width: 15%;">
                        <asp:DropDownList ID="ddlProvider" CssClass="chosen-select" DataSourceID="dsPopulateProvider" AutoPostBack="true" DataValueField="Provider" runat="server" Width="100%" Font-Size="11px" AppendDataBoundItems="true" OnSelectedIndexChanged="ddlProvider_onSelectIndexChanged">
                            <asp:ListItem Text="All" Value="%"></asp:ListItem>
                        </asp:DropDownList>
                        <asp:SqlDataSource ID="dsPopulateProvider" runat="server" ConnectionString="<%$ ConnectionStrings:gvConnString %>" SelectCommand="SELECT DISTINCT [ATTR2919] 'Provider' FROM HSI.RMOBJECTINSTANCE1224 CT INNER JOIN HSI.RMOBJECTINSTANCE1232 S ON CT.ATTR2846 = S.ATTR2821 INNER JOIN HSI.USERACCOUNT UA ON S.FK2852 = (UA.USERNUM * -1) LEFT JOIN HSI.RMOBJECTINSTANCE1251 PXC ON PXC.FK2924 = CT.OBJECTID LEFT JOIN HSI.RMOBJECTINSTANCE1249 P ON PXC.FK2923 = P.OBJECTID LEFT JOIN HSI.RMOBJECTINSTANCE1248 PRXC ON PRXC.FK2912 = CT.OBJECTID LEFT JOIN HSI.RMOBJECTINSTANCE1230 PR ON PR.OBJECTID = PRXC.FK2911 LEFT JOIN HSI.RMOBJECTINSTANCE1247 SXC ON SXC.FK2908 = CT.OBJECTID LEFT JOIN HSI.RMOBJECTINSTANCE1229 SI ON SI.OBJECTID = SXC.FK2907 WHERE CT.ACTIVESTATUS = 0"></asp:SqlDataSource>
                    </td>
                </tr>
            </table>
            <asp:GridView ShowHeaderWhenEmpty="false" AlternatingRowStyle-BackColor="#EBE9E9" AutoGenerateColumns="false" OnSorting="yourTasksGV_Sorting" AllowSorting="true" ID="yourTasksGV" runat="server" ClientIDMode="Static" EmptyDataText="There is no data to display" OnRowDataBound="yourTasksGV_RowDataBound" OnRowCreated="yourTasksGV_RowCreated">
                <Columns>
                    <asp:HyperLinkField Target="_blank" DataNavigateUrlFields="Task Detail" DataTextField="Task Name" DataNavigateUrlFormatString="" HeaderText="Task Detail" SortExpression="Task Name" ItemStyle-Width="25%" ItemStyle-CssClass="taskTableColumn" />
                    <asp:BoundField DataField="Service" HeaderText="Service" SortExpression="Service" ItemStyle-Width="20%" ItemStyle-CssClass="taskTableColumn" />
                    <asp:BoundField DataField="Status" HeaderText="Status" SortExpression="Status" ItemStyle-Width="10%" ItemStyle-CssClass="taskTableColumn" />
                    <asp:BoundField DataField="Due Date" HeaderText="Due Date" SortExpression="Due Date" ItemStyle-Width="15%" ItemStyle-CssClass="taskTableColumn" />
                    <asp:BoundField DataField="Owner" HeaderText="Owner" SortExpression="Owner" ItemStyle-Width="15%" ItemStyle-CssClass="taskTableColumn" />
                    <asp:BoundField DataField="Client" HeaderText="Client" SortExpression="Client" ItemStyle-Width="15%" ItemStyle-CssClass="taskTableColumn" />
                    <asp:BoundField DataField="Site" HeaderText="Site" SortExpression="Site" ItemStyle-Width="15%" ItemStyle-CssClass="taskTableColumn" />
                    <asp:BoundField DataField="Practice" HeaderText="Practice" SortExpression="Practice" ItemStyle-Width="15%" ItemStyle-CssClass="taskTableColumn" />
                    <asp:BoundField DataField="Provider" HeaderText="Provider" SortExpression="Provider" ItemStyle-Width="15%" ItemStyle-CssClass="taskTableColumn" />
                </Columns>
            </asp:GridView>
        </ContentTemplate>
    </asp:UpdatePanel>
</asp:Panel>

#yourTasksGV {
    width: 145%;
    padding: 0;
    margin: 0 auto;
}
.taskGridView
{
    width: 145%;
    padding: 0;
    margin: 0;
    border: 0;
    border-spacing: 0;
    border-collapse: separate;
}
.pnlScroll {
    height: 480px;
    width: 100%;
    display: inline-block;
    overflow-y: auto;
    overflow: auto;
    position: relative;

    /* IE */
    scrollbar-base-color: #A0A0A0;
    scrollbar-base-color: #A0A0A0;
    scrollbar-3dlight-color: #A0A0A0;
    scrollbar-highlight-color: #A0A0A0;
    scrollbar-track-color: #EBEBEB;
    scrollbar-arrow-color: #FFFFFF;
    scrollbar-shadow-color: #A0A0A0;
    scrollbar-darkshadow-color: #A0A0A0;
}