Is there a way to establish a maximum width for a table column?

I'm working on a table that contains data with translatable labels in the first field.

I want to set a fixed width for the label column, but also allow it to expand if the translated text is longer up to a certain limit.

For example, these are the requirements for the label column:

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

It's important to note that I specifically need help on how to implement this feature with a maximum width constraint 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>

Answer №1

Thank you for the comments that provided the solution to this issue. It seems that the min-width property is not compatible with some older browsers, such as IE 8.

I discovered that adding the following code to my .aspx file (or relevant content control) resolved the problem:

<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 are using the server-side control (although it may not be necessary in this case):

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

I utilized the selectors (>) to ensure that the properties would not affect the radio-button list control and other ASP controls that might generate a table within a table cell.

Edit: Upon further review of your question, it appears that you only wanted the first column to be modified. In this scenario, utilizing the :first-child property is recommended, along with specific selectors to prevent applying the style to radio-button lists. Here is the revised code:

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

Answer №2

If you need to set a specific width for a table, you can utilize the table-layout:fixed; property. More information can be found at this link.

You can also achieve this using max-width as demonstrated in this DEMO

Here is some basic CSS code to set a max-width of 80px:

table {
    table-layout:fixed;
}

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

No dependencies are appearing in the Visual Studio 2017 Installer Project

I am currently working on a project using Microsoft Visual Studio Community 2017 (version 15.4.4) and the Visual Studio Installer Extension. Within my existing C# .Net Core 1.1 console application, I have four Nuget packages listed as dependencies in the s ...

Assign a value to an Html.HiddenField without tying it to the model upon form submission

I have two classes, SubsidiaryClient and Client, that are related in a one-to-many manner as depicted below. Currently, I am utilizing MVC 5 for development. In the Create SubsidiaryClient page, to retrieve the ClientID, you need to click on the browse bu ...

Utilize custom fonts from your local directory within a Vite Vue3 project

Inside my main.scss file, I am loading local fonts from the assets/styles/fonts folder: @font-face { font-family: 'Opensans-Bold'; font-style: normal; src: local('Opensans-Bold'), url(./fonts/OpenSans-Bold.ttf) format('truety ...

There seems to be a white space problem located beneath the header photo and the initial

I'm a beginner at coding and working on this project for fun. I'm almost done, but I can't get rid of a white space that's dividing my header from the first section. See the screenshot below: https://i.stack.imgur.com/a1flt.png Even af ...

Is it possible for a local .resx string to point to another local .resx string?

Trying to figure out if there's a way to append a combined string to my local .resx file. Let me break it down: Imagine an ASP.NET webpage with (1) a label containing a key term, (2) an input that needs validation, and (3) a button triggering the val ...

Securing bespoke fonts in UIWebVIew

Within my application, I am utilizing a UIWebView to display HTML content. This content is retrieved from a server and then saved in the iPad's local file system to support offline access. The HTML content includes specialized fonts declared with @fon ...

Navigate to a new page by making a new request following the use of Response.Redirect

Working on an aspx page in VS 2005, I've encountered the following code: int RepID = 0; protected void Page_Load(object sender, Eventargs e) { if(!Page.Ispostback) { // Retrieve value from database and display it in textbox } ...

Is it possible to single out the final element having a specific CSS class in the absence of a parent container?

I have the following elements dynamically rendered in an HTML file. <div class="vehicle"></div> <div class="vehicle"></div> My requirement is to add a style float:right inside CSS class vehicle for the second el ...

Looking for way to trigger a MP3 player to play songs simply by clicking on them using an <a> tag?

I created a selection of songs in my <a> tags and I am looking to implement a universal mp3 player that will play the selected song without needing to refresh the page or open it in a new tab. I want the song to play directly on the player when click ...

Having trouble with custom .CSS file/classes not importing into React Bootstrap application?

This is a follow-up from Attempting to adjust the position of my React button based on numerical values (##px) isn't effective?. I am attempting to reposition a button on my webpage based on a specified value like ##px, but no matter what value I inp ...

What is the best way to create a floating navigation bar that appears when I tap on an icon?

As a beginner in the realm of React, I recently explored a tutorial on creating a navigation bar. Following the guidance, I successfully implemented a sidebar-style navbar that appears when the menu icon is clicked for smaller screen sizes. To hide it, I u ...

Header unresponsive to user interactions

Hey everyone! I'm new to using Foundation and I've hit a roadblock in my code on a medium-sized device. I would greatly appreciate your input to help me identify my mistake. Below is the snippet of my code: <div class="row"> <div cl ...

Challenges encountered when using Inner Join in SQL Server 2005

Retrieving information such as File Name, File Path and Shared By using multiple JOIN statements in a query. The error occurs in the last JOIN section with a message saying "The multi-part identifier 'ContentToIndividual.SubjectId' could not be b ...

Removing Shadow, Border, and Outline from Bootstrap v5.0.2 Navbar

I have been struggling to get rid of the shadow/outline/border on my navigation bar. Despite trying various CSS tweaks, I have not been successful. Below is the specific HTML code: <nav class="navbar navbar-expand-sm" id="site-navigation ...

Modify the background of a div according to the size of the screen. Implement this functionality using JavaScript and

After reviewing a specific post at , I find myself unsure of how to target a particular class for reference. I am certain that I want to implement document.onload = checkWidth(); window.onresize = checkWidth(); However, I am uncertain about the procedur ...

Is there a way for me to keep an image stationary on the page while allowing overlaying text to move?

Currently, I am exploring the process of coding a website that mimics the style of this particular webpage: . I am particularly interested in learning how to create a scrolling effect for text within a fixed area, while keeping the accompanying images st ...

Concerns regarding the efficiency of JavaScript (Odin Project, Etch-a-Sketch) are arising

Currently, I am delving into Javascript on the Odin Project, tackling the Etch-a-Sketch exercise. This involves creating a board where you can draw with your cursor. As part of the exercise, there's a requirement to add a resize button that allows use ...

Issue with Modal Box: Datepicker not Displaying Correctly

I have implemented a modal box in my webpage. When I click on a text field where a datepicker is added, it does not display anything. However, when inspecting the element using Chrome's developer tools, I can see that the 'hasDatepicker' cla ...

The JSON deserialization results in a null value being returned

When sending a JSON object with AJAX formData to my Controller, I am facing an issue where it always returns null when trying to deserialize it to an object. While I can convert it to dynamic, I struggle to convert the dynamic type to the Category class. ...

Adjust the height of the left div to be compact without impacting any other div within the parent

Struggling to come up with a name for this issue, so I apologize if it's unclear. Basically, I am working on a tabbed module where the .right div always stays the same height. The .left div contains the links/tabs, but I don't want its height to ...