c# - 如何设置表格列的宽度限制？

Question

我有一个包含数据的表格，在第一个字段中有可翻译的标签。

我希望能够在标签列中设置一个宽度，但如果有人翻译标签并且文本更长，那将扩展该列但达到给定点。

示例标签列要求:

Width: 200px;
Expandable: true;
Max Expanding: 300px; 

注意:我特意询问如何启用此功能，但展开时必须有最大宽度。

    <table id="tblCustTypes" class="tblTop">
        <tr>
            <td class="auto-style1">
                <asp:Label ID="lblCustType" runat="server" Text="Cust Type"></asp:Label>
            </td>
            <td>
                <asp:TextBox ID="txtCustomerType" runat="server" Width="20%" class="autosuggest" CssClass="autosuggest" OnChange="onSave();" OnTextChanged="txtCustomerType_TextChanged" AutoPostBack="True"></asp:TextBox>
                <asp:Label ID="lblTempCustType" runat="server" Visible="false"></asp:Label>

            </td>
        </tr>
        <tr>
            <td class="auto-style1">
                <asp:Label ID="lblDescription" runat="server" Text="Description"></asp:Label>
            </td>
            <td>
                <asp:TextBox ID="txtDescription" runat="server" Width="35%"></asp:TextBox>
            </td>
        </tr>
        <tr>
            <td class="auto-style1">
                <asp:Label ID="lblApplyVAT" runat="server" Text="Apply VAT"></asp:Label>
            </td>
            <td>
                <asp:RadioButtonList ID="rblApplyVAT" runat="server" RepeatDirection="Horizontal">
                    <asp:ListItem Selected="True" Value="1">Yes</asp:ListItem>
                    <asp:ListItem Value="0">No</asp:ListItem>
                </asp:RadioButtonList>
            </td>
        </tr>
        <tr>
            <td class="auto-style1">
                <asp:Label ID="lblProduceInvoices" runat="server" Text="Produce Invoices"></asp:Label>
            </td>
            <td>
                <asp:RadioButtonList ID="rblProduceInvoices" runat="server" RepeatDirection="Horizontal">
                    <asp:ListItem Selected="True" Value="1">Yes</asp:ListItem>
                    <asp:ListItem Value="0">No</asp:ListItem>
                </asp:RadioButtonList>
            </td>
        </tr>
        <tr>
            <td class="auto-style1">
                <asp:Label ID="lblPurchaseSale" runat="server" Text="Purchase/Sale"></asp:Label>
            </td>
            <td>
                <asp:RadioButtonList ID="rblPurchaseSale" runat="server" RepeatDirection="Horizontal">
                    <asp:ListItem Value="P">Purchase</asp:ListItem>
                    <asp:ListItem Selected="True" Value="S">Sale</asp:ListItem>
                </asp:RadioButtonList>
            </td>
        </tr>
        <tr>
            <td class="auto-style1">
                <asp:Label ID="lblTerms" runat="server" Text="Terms (Days)"></asp:Label>
            </td>
            <td>
                <asp:TextBox ID="txtTerms" runat="server" Width="5%"></asp:TextBox></td>
        </tr>
        <tr>
            <td>
                <asp:Label ID="lblLastUpdated" runat="server" Text="Last Updated"></asp:Label>
            </td>
            <td>
                <asp:Label ID="lblLastUpdatedVal" runat="server" Text=""></asp:Label>
            </td>
        </tr>
    </table>

Answer 1

评论提供了解决方案。你使用的是什么浏览器？ min-width 属性与某些旧版浏览器不兼容，包括 IE 8。

我发现将其放入我的 .aspx 文件(或相关内容控件)中就可以了。

<style>
    .tblTop > tbody > tr >  td { 
        min-width:50px;
        max-width: 100px;
        border: 1px solid black;
    }
</style>


<table class="tblTop">
    <tr>
        <td>Hello</td>
        <td>Goodbye</td>
    </tr>
    <tr>
        <td>Some very long string that will extend to the maximum width that I set and force the words to wrap around.</td>
        <td>Goodbye</td>
    </tr>
</table>

如果您使用的是服务器端控件(不确定为什么会在这里):

<asp:Table CssClass="tblTop"> . . .

我使用了选择器 (>)，这样属性就不会应用于单选按钮列表控件和其他可能在表格单元格内创建表格的 ASP 控件。

编辑:重新阅读您的问题后，我发现您只想更改第一列。在这种情况下，使用 :first-child 属性是可行的方法，但您仍然需要选择器，这样您的单选按钮列表就不会将它们的列设置为该样式。代码如下:

<style>
    .tblTop > tbody > tr:first-child {
        min-width:50px;
        max-width: 100px;
        border: 1px solid black;
    }
</style>