How can I set a width limit on a table column?

Question

I have a table containing data and in the first field it has translatable labels.

I would like to be able to set a width in the label column but make it so that if someone translates the labels and the text is longer, that is expands the column but up to a given point.

Example label column requirements:

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

Note: I am specifically asking how to enable this functionality but it must have a maximum width when expanding.

    <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>

You might want to consider using the `min-width` CSS property rather than just `width`. — Richard, Jun 12 '14 at 08:37
I tried the min-width but it doesn't make any difference. In my mind the column needs to auto-expand but with a limit. Is that possible? — connersz, Jun 12 '14 at 09:36
Note that `min-width` is a CSS property, not an ASP.net property as you've used above. — JimMSDN, Jun 12 '14 at 09:47
The example above isn't real code, it's just an example of what I need @JimMSDN — connersz, Jun 12 '14 at 09:49

Zairja · Accepted Answer · 2014-06-23T01:10:07.307

The comments provided the solution. What browser are you using? The min-width property isn't compatible with some older browsers, including IE 8.

I found that putting this in my .aspx file (or relevant content control) did the trick.

<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>

If you're using the server-side control (not sure why you would here):

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

I used the selectors (>) so that the properties wouldn't apply to the radio-button list control and other ASP controls that might create a table within a table cell.

Edit: After re-reading your question, I see that you only wanted the first column to change. In that case, using the :first-child property is the way to go, but you will still want selectors so that your radio-button lists don't set their columns with that style. The code would be as follows:

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

score 0 · Answer 2 · answered Jun 17 '14 at 14:31

Usually to force a width within a table , you use table-layout:fixed; Explanation on http://www.w3.org/wiki/CSS/Properties/table-layout .

It should work too with max-width: DEMO

basic CSS for a max-width of 80px:

table {
    table-layout:fixed;
}

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

How can I set a width limit on a table column?

2 Answers2