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>

Answer 2

通常在表格中强制使用width，您可以在http://www.w3.org/wiki/CSS/Properties/table-layout上使用table-layout:fixed;说明。

最大宽度也应该有效： DEMO

最大宽度为80px的基本CSS：

table {
    table-layout:fixed;
}

table tr :first-child {
    max-width:80px;
}

如何在表格列上设置宽度限制？

2 个答案: