What could be causing the width to malfunction on the td element when using table-layout fixed?

In my research on SO, I encountered several posts related to this issue such as TD column width value not working with fixed table-layout and td widths, not working?. Despite trying the suggestions provided in those posts, assigning a width to td does not result in the expected width. The problem is illustrated below: 

div {
  width: 400px;
  padding: 5px;
  border: 1px solid red;
}
table {
  table-layout: fixed;
  width: 100%;
  border: 1px dotted green;
}
td {
  word-break: break-all;
}
td:nth-of-type(1) {
  width: 50px;
}
td:nth-of-type(2) {
  width: 150px;
}
<div style="width: 400px;">
  <table style="table-layout: fixed; width: 100%;">
    <thead>
      <tr>
        <th></th>
        <th></th>
        <th></th>
        <th></th>
      </tr>
    </thead>
    <tbody>
      <tr class="odd">
        <td class="">
          <a href="#">The_first_line</a>
        </td>
        <td class="">
          <a href="#">The_second_but_a_long_line_with_so_many_characters</a>
        </td>
        <td class="">
          <ul class="">
            <li class=""><a href="#" rel="tag" title="" class="">The simple</a>
            </li>
          </ul>
        </td>
        <td>
          <a href="#">last</a>
        </td>
      </tr>
    </tbody>
  </table>
</div>

The first td should be 50px wide and the second should be 150px wide, however, this is not the case. Why is this happening?

htmlcsshtml4

Answer №1

The pseudo-class :second-of-type that you are using is not valid. Consider using the :nth-of-type() pseudo-class instead:

td:nth-of-type(2) {
  width: 150px;
}

However, this method may not be the most reliable way to target your element. What if there are multiple tables on your page? It might be a good idea to assign a class to your table:

<table class="my-table">

Then, you can target specifically for that table like this:

.my-table td:nth-of-type(2) { .. }

Answer №2

It seems like there is no CSS selector called second-of-type, but you can achieve the same effect by using nth-child(2). Make sure to style the th elements within a thead section for the desired outcome. Here is a solution that will help you achieve what you want:

div {
  width: 400px;
  padding: 5px;
  border: 1px solid red;
}
table {
  table-layout: fixed;
  width: 100%;
  border: 1px dotted green;
}
td {
  word-break: break-all;
}
th:first-of-type {
  width: 50px;
}
th:nth-child(2) {
  width: 150px;
}
<div style="width: 400px;">
  <table style="table-layout: fixed; width: 100%;">
    <thead>
      <tr>
        <th></th>
        <th></th>
        <th></th>
        <th></th>
      </tr>
    </thead>
    <tbody>
      <tr class="odd">
        <td class="">
          <a href="#">The_first_line</a>
        </td>
        <td class="">
          <a href="#">The_second_but_a_long_line_with_so_many_characters</a>
        </td>
        <td class="">
          <ul class="">
            <li class=""><a href="#" rel="tag" title="" class="">The simple</a>
            </li>
          </ul>
        </td>
        <td>
          <a href="#">last</a>
        </td>
      </tr>
    </tbody>
  </table>
</div>

Answer №3

Consider setting the width for the column headers (th) instead of the table cells (td) by utilizing the following CSS code: Check out the demo here.

tr th:first-child {
  width: 50px;
}

tr th:nth-child(2) {
  width: 150px;
}

Answer №4

The issue lies in setting the width only on the td elements and not on the th elements. To fix this, you need to set the width on both td and th elements like so:

td:nth-of-type(1) {
  width: 50px;
}
th:nth-of-type(1) {
  width: 50px;
}
td:nth-of-type(2) {
  width: 150px;
}
th:nth-of-type(2) {
  width: 150px;
}

For a visual example, check out this link: https://www.example.com/code/sample

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

Execute a JavaScript function when an HTML list element is clicked

As a beginner in web development, I have a question that might seem obvious to some. I want to create a menu where each item, when clicked, triggers a JavaScript function with the item's ID as an argument. I plan to display the menu items in an unorde ...

javascripthtmlmenu

Whenever I attempt to style a html/jsx tag in css, I receive an error message stating that 'h1 "selector" is not pure'

Issue: The CSS selector "h1" is not considered pure (pure selectors must include at least one local class or id) 5 | } 6 | > 7 | h1 { | ^ 8 | font-size: 48px; 9 | text-align: center Encountered this error while attempting ...

htmlcssreactjsjsxnext.js

providing the context for the hover title description

I seem to be struggling with a seemingly simple issue and can't find a solution. Below is the code I have written: <html> <head> <style> span.dropt { border-bottom: thin dotted; background:white; } </style> </head> ...

htmlcssbackground

What steps should be taken to avoid an event from occurring when an error message is encountered?

I have a dropdown list of cars where an error message is displayed if any of them becomes inactive. When the error message is shown, clicking on the Route Car button should prevent any event from occurring, i.e., no modal popup should be displayed. How ca ...

javascriptjqueryhtmlvalidationbootstrap-modal

What is the best way to horizontally align an image beneath a navigation menu that is built using <ul> tags?

Seeking a way to center an arrow graphic under the selected item in a simple CSS drop-down menu? Considering using the :after selector, but currently being used for drawing dividing lines between menu options: HTML: <ul> <li>Option Zero&l ...

jquerycssdrop-down-menu

Ensure that column headers remain fixed when scrolling side to side

I'm trying to adjust the column headers so that I can scroll horizontally while keeping the headers visible. I've attempted the following changes but haven't been successful. In the screenshots provided, you can see that when I scroll up or ...

htmlcssangular

React-router is failing to redirect properly within a specific component

I have configured react router to redirect from the "/" route to a custom route "/:city/posts", but the redirect is not working as expected. When the button is clicked, the page refreshes. This setup is working fine in other components, so I'm not sur ...

javascripthtmlexpressreact-router

Expansive Offspring Division stretching to the Entire Vertical Length of its Guardian Division

I'm attempting to achieve full coverage of the parent div section by my child div section. Take a look at the Example URL (specifically where the Canadian Flag Stand Up Paddle Boarders are located) towards the bottom: Essentially, when I set the widt ...

htmlcssdynamicheight

When Css is incorporated within a text, it prevents the use of " " from functioning properly

I am currently developing a GUI application using Qt 4.8. I have a label that displays text in white (the stylesheet has already been set up for this) and I want to change the color of the word "UPDATE" to red. Here is my initial code: //all text in whit ...

c++cssqt

Creating One Comprehensive Object by Merging Multiple Character Objects

I am attempting to extract text from a news article using the code snippet below: library(rvest) url <- "https://www.bbc.com/future/article/20220823-how-auckland-worlds-most-spongy-city-tackles-floods" final = url %>% read_html() %>% ...

htmlrtext

Tips on automating clicking the cookie button using Selenium?

Currently, I am attempting to extract data from the following website. I need to access various subpages, but some of them are hidden behind a "load more" button. I decided to use Selenium to click the button, but I am encountering difficulty with getting ...

pythonhtmlselenium-webdriverweb-scraping

Sending JSON Data from C# to External JavaScript File without Using a Web Server

Trying to transfer JSON data from a C# (winforms) application to a static HTML/JavaScript file for canvas drawing without the need for a web server. Keeping the HTML file unhosted is preferred. Without involving a server, passing data through 'get&ap ...

javascriptc#jqueryjsonhtml

Creating transparent overlay boxes with CSS grid

I'm working on a design where I need to display text information over an image. The challenge is aligning the text properly, especially when the screen size changes due to using a grid system (1140). Currently, I have a div with transparent background ...

cssoverlaytransparent

Updating the navigation with a dynamic CSS class using jQuery

Hey there, I'm on the lookout for a simple and discreet method to dynamically add an "active" class to a navigation menu based on the current directory. Unfortunately, I am unable to modify the body tag with a custom class, ruling out a pure CSS solut ...

jquerycss

The HTML code as content

While working on an AJAX project, I ran into this issue: http://jsbin.com/iriquf/1 The data variable contains a simple HTML string. After making the AJAX call, I noticed that the returned string sometimes includes extra whitespaces. I attempted to locat ...

javascriptjqueryhtml

What is the correct way to call upon Bootstrap's CSS that was obtained through a Gradle dependency?

I'm having trouble referencing the Bootstrap library from the 'External Libraries' section in my project. In my build.gradle file, I included: compile group: 'org.webjars', name: 'bootstrap', version: '3.3.7' ...

csstwitter-bootstrapintellij-ideagradle

D3: Ensuring Map is Scaled Correctly and Oriented Correctly

I am attempting to integrate a map into a website using D3 and topoJSON that resembles the following: https://i.sstatic.net/1brVx.png However, when I create the map with D3/topoJSON, it shows up small and inverted. https://i.sstatic.net/LgQBd.png Even ...

javascriptcssd3.jsgeojsontopojson

What is the best way to toggle dropdown menu items using jQuery?

Upon clicking on an li, the dropdown menu associated with it slides down. If another adjacent li is clicked, its drop down menu will slide down while the previous one slides back up. However, if I click on the same li to open and close it, the drop down m ...

javascriptjqueryhtmlcss

Issue with QuickSand Script not displaying properly on Internet Explorer 7

My website features an edited version of Quicksand that displays correctly on Chrome, Opera, and Firefox, but runs into CSS issues on IE. Oddly enough, when I was using the static version, the CSS displayed properly even on IE until I added the Quicksand e ...

jquerycssquicksand

JQuery Mobile: Adding fresh, dynamic content - CSS fails to take effect

I've encountered this issue before, but I'm still struggling to resolve it. When adding dynamic content to a page (specifically a list-view), the CSS seems to disappear once the content is added. I've tried using the trigger("create") functi ...

javascriptjquerycssjquery-mobile