Ensure that the text in the table with a width of 100% remains stable

Currently, I am encountering an issue with the inside text moving within my application on a webpage. In my previous tables, I utilized the min-width option to prevent the text or td from shifting when resizing the website page. For example, when stretching over two monitors, everything remains fixed except for the footer.

I am seeking advice on how to ensure that each <td> text stays fixed on the page.

Here is a snippet of the HTML code:

<table cellpadding="0" cellspacing="0" border="1" width="100%" style="min-width:1400px">
    <tr bgcolor="silver">
        <td align="center" valign="middle" width="200"> <font face="Arial, Helvetica, sans-serif" size="2.5">
                Last Modified:&nbsp;</font>

        </td>
        <td align="left" width="400"><font face="Arial, Helvetica, sans-serif" size="2.5">
                 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/ClassifiedAds/Index.aspx</font> <br/>
        <font face="Arial, Helvetica, sans-serif" size="1"> </font> 
        </td>
        <td align="left" valign="middle" width="300"><font face="Arial, Helvetica, sans-serif" size="2.5"></font> </td>
    </tr>

https://jsfiddle.net/avaz8sbh/

htmlcss

Answer №1

Feel free to check out this fiddle where I have included a blank td without any width specified, ensuring that the other columns do not resize when the page is resized.

https://jsfiddle.net/johndoe/abcd1234/5/

You also have the option to remove width="300" from the third td, causing it to only expand upon resizing while keeping the other two columns at a fixed width.

Answer №2

Instead of using pixels, try utilizing percentages in order to prevent exceeding 100%.

<td width="20%">
<td width="30%">
<td width="50%">

Additionally, remember to delete any instances of style="min-width:1400px".

By doing this, your table will occupy 100% of the page perfectly.

Calculating it out: 50 + 30 + 20 = 100

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

Transmitting HTML and CSS code to the server for seamless conversion into a PDF file

I recently started using a tool called GemBoxDocument that allows me to convert HTML files into PDFs. Their website provides sample code demonstrating how to convert an existing file on a server (source): using System; using System.Linq; using System.Tex ...

c#htmlajax

Expanding the blank area on the right margin of the page

Recently, I took a responsive website template and converted it into an ASP.NET MVC app. However, I've encountered some peculiar behavior when resizing the browser window. As the width of the window decreases below 986 pixels, a mysterious white "spac ...

htmlcssresponsive-design

Is there a way to position my character at the exact center of my mouse click coordinates instead of the top left corner?

In my game, players can click on a 2D HTML5 canvas to set a point for their character to move to. However, I've noticed that when I click, the character appears in the lower right corner of where my mouse is clicked. After some research, I realized th ...

javascripthtml

How can I determine the specific quantity of XPATH links with unique identifiers in Selenium?

Seeking automation with Python3 and selenium to streamline searches on a public information site. The process involves entering a person's name, selecting the desired spelling (with or without accents), navigating through a list of lawsuits, and acces ...

pythonhtmlselenium

What is the best way to reference a PHP file located outside the same directory as the main PHP file?

My current file structure looks like this: Wamp>www>Newlinks CSS (folder) header.php footer.php Profiles (folder) MainPHPfile.php I'm trying to include the header and footer files into MainPHPfile.php, but it's not working ...

phphtmlcss

How to make a Material UI Dialog Box automatically expand to fit the Dialog Content Area

In my project, I am working on a Dialog component which has a maximum width and a minimum height. Inside the DialogContent, I want to have a Box element that stretches to fill out the remaining space of the DialogContent. The goal is to have a background i ...

cssreactjsmaterial-ui

Ways to customize the background color of child cells in a table

I've implemented material-table in this UI and I'm currently working on customizing the style of specific cells only when the onTreeExpandChange is true. Essentially, my goal is to change the background color for cells 2 & 3. Check out the s ...

cssreactjsmaterial-uimaterial-table

Using jQuery to remove an iframe upon a click event

My goal is to remove an iframe whenever anything on the page is clicked. I tried using this code: $('*').on('click',function(){ $('iframe').remove(); }); However, I encountered a problem where the i ...

javascripthtml

Changing pricing on pricing table with a click

Looking to implement a price changing button that functions similar to the one found at this LINK: If anyone knows of any JavaScript or other solution, please provide me with some guidance. Thank you in advance. ...

javascriptjqueryhtmlcsstwitter-bootstrap

What is the best way to increase the spacing between inline-block elements?

Just to clarify, I am not looking to delete space between inline-block elements - rather, I want to insert it. My goal is to create a grid of menu items that can accommodate 2, 3, or 4 items per row, and I hope to achieve this using media queries. Is the ...

htmlcss

Discovering the special HTML element lacking attributes

When two similar tags, such as anchor tags below, do not have any attributes or css properties associated between them, is there an internal property to distinguish between the two? <html> <body> <a>sample</a> <a>s ...

javascripthtmlevents

What are the best techniques for styling the aria label element in HTML?

Looking to enhance the appearance of a button label upon hover. Curious about how I can customize the aria-label element to resemble the design in the screenshot provided below. ...

htmlcsslabel

Ways to gather all the elements on each page

Currently engrossed in a web scraping endeavor for a car website utilizing Selenium. One potential roadblock I've encountered is that the code seems to only iterate over the initial car element on the page, instead of going through the entirety of ava ...

pythonhtmlselenium-webdriverweb-scraping

How can I achieve a smooth background-image transition in Firefox?

Currently, I'm on the hunt for a substitute for this specific code snippet: "transition:background-image 1s whatever" This particular transition only seems to function on webkit browsers, leaving Firefox users out of luck. I experimented with utili ...

htmlcssfirefox

Creating a grid cell that spans the entire grid width

Snippet of CSS Code: .wrapper { display: grid; position: relative; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 25vh; width: 100%; } .prova { border: 1px solid; } .wrapper div:nth-child(2) { grid-column: 3; grid-row: 2 / 4; ...

htmlcssgrid

Adding a line and text as a label to a rectangle in D3: A step-by-step guide

My current bar graph displays values for A, B, and C that fluctuate slightly in the data but follow a consistent trend, all being out of 100. https://i.stack.imgur.com/V8AWQ.png I'm facing issues adding lines with text to the center of each graph. A ...

javascriptcssd3.js

Having trouble seeing the output on the webpage after entering the information

I can't seem to figure out why the result is not displaying on the HTML page, so for now I have it set up as an alert. <h1>Factorial Problem</h1> <form name="frm1"> Enter any number :<input type="text" name="fact1"& ...

javascripthtml

Ways to modify color while user moves the screen

I'm working with some jQuery code that changes the colors of elements as the user scrolls down, and I want it to revert back to the original color when scrolling back up. However, the script is not behaving as expected... Here is the original working ...

javascriptjqueryhtmlcss

What is the best method to extract individual data values from ul li tags using PHP?

As I navigate through a page filled with HTML codes, I stumble upon snippets like this: <ul class ='trainList'> <li> <div class="smallFont farelist no-discount "> <div class="train-no">ABC 701</div> ...

phphtmlxpathdomdocument

The style of the button label does not persist when onChange occurs

Encountered an interesting issue here. There is a button designed for selection purposes, similar to a select item. Here's the code snippet: <button class="btn btn-primary dropdown-toggle" style="width: 166%;" type="button" id="dropdownMe ...

javascriptjqueryhtmlcssstyles