Problem regarding the widths of HTML <table> elements

I am working with a <table> that has 3 columns structured as follows:

table {
  border: 1px dashed goldenrod;
}
td {
  border: 1px solid gray;
}
<table>
  <tr>
    <td width="120">Some content</td>
    <td width="150">Some content</td>
    <td width="100%">Some content</td>
  </tr>
</table>

Although the 3rd column is set to occupy the remaining width, it seems to compress the first 2 columns in my case...

If I do not specify a width for the 3rd column/td, I can see the specified widths for the first 2 columns...

I would appreciate any help or advice on this issue.

Note: The table has already been set with width="100%"

htmlcsshtml-table

Answer №1

Keep the final column width unassigned, and adjust table width to 100% or your preferred width for the table layout.

Answer №3

My advice would be to choose between percentages and pixels when determining column widths, as mixing the two can lead to compatibility problems across different browsers.

Pick either % or pixels for consistency, and consider leaving the third column width unspecified.

Answer №4

When setting the width of the third td to 100%, it means that it will match the width of its parent element, which is the corresponding tr. This causes the first and second td elements to be compressed as the third one attempts to take up the entire row width.

If there is no content in the first two td elements, they will not be visible. The browser allocates minimal space to them when there is some content present, with the majority of the width taken by the third td.

You can view a demonstration on jsfiddle showing the result of setting the width of the last td to 50%. It occupies exactly half of the row width. See the demo here.

To address this issue, specify percentage widths for the first two td elements, while leaving the third one's width unspecified. View a demo illustrating this approach here.

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

Tips for creating the X Mark using SVG and CSS

I'm struggling to create an animation of an "X" checkmark sign (for failure). Although I found a great example of an animated checkmark sign for success, the code uses a curve-bezier design that I can't replicate for the "X" sign. If anyone cou ...

htmlcsssvgwebfrontend

Utilizing Node.js to dynamically inject variables in SASS compilation

I am currently working on an application where I need to dynamically compile SASS before rendering it on the client side (a caching system is in the works, so no worries there). At the moment, my tool of choice is node-sass and so far, everything is runnin ...

cssnode.jsexpresssassnode-sass

Trigger a click event on a dynamically loaded button

Here's a unique twist to the usual discussions on this topic. I have a dynamically loaded button in my HTML, and I've saved the selector for it. Later on in my code, I need to trigger a click event on this button programmatically. The typical $(& ...

javascriptjqueryhtmldom

I am experiencing issues with my HTML select list not functioning properly when utilizing a POST service

When using Angularjs to automatically populate a list with *ngFor and then implementing a POST service, the list stops functioning properly and only displays the default option. <select id="descripSel" (change)="selectDescrip()" > <option >S ...

htmlangulartypescript

Tips for incorporating a simple jQuery table

Is there a way to incorporate a simple table with 2 columns and 10 rows on a specific section of a webpage? The table will consist of 10 dynamic entries that are refreshed manually from the back-end DB. The second column of each entry will contain a bit.ly ...

jqueryhtml

The table contained within a row-spanning cell fails to fully occupy the cell's height across different browsers

Chrome rendering and code issue I'm struggling to understand why the nested table (highlighted in red) is not taking up the full height of the outer table cell (highlighted in green) which spans 8 rows. This used to work fine, but newer browsers are ...

htmlcss

Unable to load CSS background image and update code

After writing the code in my CSS file, /*The code I initially wrote*/ .wrapper::before { content: ""; position: absolute; bottom: -30%; left: 0; height: 100%; width: 100%; background: url(../img/homeTrans2.svg) no-repe ...

htmlcss

Creating multi-level nested lists with numbering using HTML and CSS

Is there a way to create a unique numbering format using only HTML and CSS lists (<ul> or <ol>)? 1. Item A 2. Item B 3. Item C 3.1. Subitem C.1 3.2. Subitem C.2 3.3. Subitem C.3 4. Item D 4.1. Subitem D.1 4.1.1 Sub-subi ...

htmlcsshtml-listsnested-lists

Having trouble displaying a local image in CSS using EJS

Hey there, I'm currently working with EJS. In my CSS file, I've added a background image but it's not showing up when the page loads. Strangely, if I use a hosted image, it works perfectly. Here is my directory structure: style.css file: ...

cssnode.jsexpressejs

Adjusting the visibility of a div as you scroll

I'm trying to achieve a fade-in and fade-out effect on div elements when scrolling over them by adjusting their opacity. However, I'm facing difficulties in getting it to work properly. The issue lies in the fact that my div elements are positio ...

javascripthtmljquerycss

PHP - Unable to store the input content

I've encountered an issue with my website where I need to create a form for users to submit new information or news. Below is the code snippet that I have: <?php include "0begin.php"; $title=$_POST["title"]; isset($title) or $title=$_GET["tit ...

phphtmlwebnetworking

What could be causing my AngularJs routing and animation to bypass the second redirection?

Recently started working with Angular and experimenting with routing and animations to manage my page transitions. I followed a helpful guide that helped me set everything up. I encountered a few issues: When trying to link back to the landing page (home ...

javascripthtmlangularjsanimationangular-routing

A guide on how to implement the closing functionality of a CSS menu when clicking outside the menu using

I have a drop-down navigation menu implemented on a website using CSS. The sub-menus appear when hovering over specific items. While this functionality works well on desktop, I am encountering an issue on touchscreens. When clicking outside the menu area, ...

javascriptjquerycsstouchscreen

What causes the discrepancy in CSS display between production and development environments in Material-UI?

Using material UI (verison: ^4.12.3) Select, with a customized input has led to an unexpected issue in the production environment. The Select input in prod has a black background and a :before element with a white background that I didn't intend to ha ...

cssreactjsmaterial-uidevelopment-environmentproduction-environment

CSS navbar with a unique design: Issue with List Hover not Persisting

I'm facing a common issue with a pure CSS navbar. I have constructed a navbar using ul and li elements, but I am unable to make the menus stay visible when I hover over them. The problem lies in the fact that the menu opens only when I hover over the ...

javascriptjqueryhtmlcsstwitter-bootstrap

Applying the jqtransform plugin to all forms except for one

We've implemented the jQuery jqtransform plugin to enhance the appearance of our website's forms. However, there is one particular form that we'd like to exclude from this transformation. I made adjustments to the script that applies jqtrans ...

javascriptcssformsjqtransform

Learn the process of generating sequential heading numbers for topic headings in each HTML document using DTA or XHTML

I attempted to include hierarchical numbers for topic headings in dita2xhtml_eclipsehelp.xsl. (DITA OT HTML output) However, I am facing difficulty in producing numbers similar to the following in each html file: 1 heading text 1.1 heading text 1.1.1 Head ...

htmlxsltoutputtableofcontentsdita

Adjust the background color of the dropdown menu

I'm struggling to change the background color of the property address picker dropdown from transparent to white. I've been trying different things but can't seem to get it right. Any suggestions? Additionally, I want to change the cursor to ...

jqueryformscss

Instead of loading the HTML into the div, Ajax is now sending me the link instead

I have just begun working on a new laravel project and am currently working on the user profile page, which will include a sidebar with links like Portfolio, Account Settings, etc. My goal is to dynamically load each page into a div when a link in the side ...

javascripthtmljqueryajaxlaravel

What is the best way to add a background to certain elements?

Is there a simple and elegant way to swap the background of the circle with the background of the div underneath? I would like the circles to have the background image of div "one", while keeping div "one" invisible (not using visibility:hidden). I am lo ...

htmlcss