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

我希望能够在标签列中设置宽度,但要使其宽,以便如果有人翻译标签并且文本较长,那将扩展列,但直至指定点。

标签列要求示例:

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>

最佳答案

这些评论提供了解决方案。你使用的是什么浏览器? 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>

关于c# - 如何设置表格列的宽度限制?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/24179811/

10-11 01:40
查看更多