What could be the reason that my CSS rule is not impacting this particular element?

Looking for help with my HTML code - I want to make the header row of a table bold. Here's what I have:

<!DOCTYPE html>
<html>

<head>
  <style>
    table>tr>th {
      font-weight: bold;
    }
  </style>
</head>

<body>
  <table>
    <tr>
      <th>Amount</th>
      <th>Name</th>
    </tr>
    <tr>
      <td>5</td>
      <td>orange</td>
    </tr>
  </table>
</body>

</html>

My CSS rule doesn't seem to be working, but changing it to table tr > th fixes the problem. Can anyone explain why this is? As far as I know, the <tr> is a direct child of the <table> and the <th> is a direct child of the <tr>. What am I missing here?

htmlcss

Answer №1

It's worth noting that the example provided doesn't showcase the issue as the default font weight for a th element is already set to bold.

However, there is indeed a problem:

A tr element cannot directly be a child of a table.

Instead, a tr element must be a child of either a thead, tbody, or tfoot element.

Additionally, the opening and closing tags of a tbody element can be omitted.

This means that if you write:

<table><tr>...</tr></table>

The browser will automatically infer the presence of a tbody element resulting in the following DOM structure:

<table><tbody><tr>...</tr></tbody></table>

Therefore, the tr element becomes a grandchild of the table element rather than a direct child.

table>tr>th {
  color: blue;
}

table>tbody>tr>th {
  color: pink;
}
<table>
  <tr>
    <th>Amount</th>
    <th>Name</th>
  </tr>
  <tr>
    <td>5</td>
    <td>orange</td>
  </tr>
</table>

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

What steps can I take to ensure this conversion meets markup validation requirements?

I keep encountering a validation error that keeps coming up: $("#preview").html('<div align="center"><img src="/ajaximage/loader.gif" alt="Uploading...."/></div>'); The error message states: document type does not allow elemen ...

javascripthtmlw3c-validation

Exploring the differences between SASS and Bootstrap: the battle of mixins versus @extend

Currently utilizing the SASS version of Bootstrap found here. Curious as to whether there are distinctions between using the pre-set mixins versus utilizing SASS's @extend. For example, considering the following: <div class="wrapper"> Some ...

csstwitter-bootstrapsass

Providing space for a two-line title

It's a bit tricky to explain, so if anyone has a better title in mind, feel free to change it. I'm trying to create a black box behind my headline. I'm using a span inside the h-tag for this purpose, but I need to add some padding to the le ...

csspaddinghtml

Real-time update of quiz results based on varying factors

In my quiz, I have set up variables that start at 0 and increase based on certain conditions. One variable should increase when a question is answered correctly, while the other should increase when a question is answered incorrectly. If you answer a quest ...

javascriptjqueryhtmlcss

Is it possible to trigger the execution of two functions simultaneously by using onClick in JavaScript?

I currently possess: one = () => { //perform a task } two = () => { //execute an action } <div> <button onClick={/*this.one, this.two (it doesn't function)*/}>Go</button> </div> Is there a way to invoke two f ...

javascripthtmlreactjs

Enhancing user experience with autocomplete functionality using jQuery combined with server

Struggling with autocompleting a search field using jQuery-UI and encountering issues when trying to integrate PHP as the data source. The setup works smoothly with a variable as the source. JS: $(function () { var data = [ "ActionScript", ...

javascriptphpjqueryhtmlmysqli

Tips for Creating an Animated Progress Bar in a Slider

After implementing jQuery, I managed to create a unique slider on my website. This slider included a thumbnail with captions for each photo. Positioned below the thumbnail was a progress bar fixed in the center between the caption and the image. Users can ...

javascriptjqueryhtmlcss

Javascript updating text according to input in textbox functions properly initially, but the changes disappear afterward

This solution functions correctly for a brief moment before disappearing. function checkTFW() { var TFW = document.getElementById("TFW").value if (TFW == "mexicans") { document.getElementById("image").innerHTML = "<h1>Success!</h1>"; ...

javascripthtml

html displaying dynamic data in a table

As a beginner in coding, I am attempting to create a dynamic table. The first column is working fine with each new cell being added to the top. However, when I try to add columns, they fill from top to bottom instead of mirroring the first column. I want m ...

javascripthtml

Shifting an image outside of the container in a Bootstrap 4 card header

I am attempting to create a design similar to this: https://i.sstatic.net/OR4Em.png I am currently using Bootstrap 4 cards, but I am struggling to figure out the best way to move the icon/image outside of the Cards header. I have experimented with differe ...

csssassbootstrap-4

Utilizing Piwik Analytics in jQuery Mobile Framework

Having an issue with tracking users on my mobile Web App using Piwik. Due to AJAX, only views on the first page are being tracked. I attempted to use the pageinit function to load the Piwik tracking script on every page, but it still only tracks the firs ...

javascriptjqueryhtmljquery-mobilematomo

Height of dropdown items in the horizontal navbar

I am working on a navbar that includes a dropdown menu. Currently, the dropdown items are being displayed horizontally in full width with a larger height. However, I would like them to be displayed vertically in full width and with a smaller, normal height ...

csstwitter-bootstrap-3

Determine the width of invisible images using JavaScript/jQuery

Please take a look at the jsFiddle Every time I run it, I am trying to retrieve the width of the images, but the values I get are as follows (check in the JS console) 400 0 575 533 0 ... Some values are zero, and I can't figure out why. It seem ...

javascriptjqueryhtmlcssjquery-plugins

Having trouble getting basic PHP IF/ELSE code to function correctly alongside HTML markup

I recently delved into learning the basics of PHP and everything was going smoothly until I attempted to incorporate some IF/ELSE statements within the markup. Here is a snippet of what I tried: <?php $msg = 0; echo $msg; ?> <!DOCTYPE html> ...

phphtml

Is it possible to encase <v-img> within an anchor element?

I am currently using Vuetify 1.5 and have included a couple of <v-avatars></v-avatars> elements in which there is a nested <v-img></v-img>. I attempted to enclose the img tags within an a tag but encountered an issue wherein the ima ...

javascripthtmlcssvue.jsvuetify.js

Fixed navigation bar at the top of the page

After implementing code found at this source to create a sticky navigation bar at the top of my webpage, I encountered an issue. When I tried adding my actual navigation content into the navbar, it appeared about 20 pixels below the top and then snapped ba ...

jqueryhtmlcss

When my viewport's size is less than 998px, a blank space appears

While configuring media queries in my HTML and CSS project, everything seemed to be working well. However, I noticed that when I shrink the screen, there is an empty white space on the right side and a horizontal scroll bar appears at the bottom without an ...

htmlcsswhitespaceviewport

Troubleshooting the Problem of Uneven Heights in Bootstrap Columns

I am facing an issue with a dropdown inside a Bootstrap grid. When I click on the dropdown, the height of the row is not increasing as expected. Can anyone guide me on how to achieve this? HTML: <div class="container"> <div class=& ...

htmlcsstwitter-bootstrapbootstrap-4dropdown

Ways to eliminate gaps between div elements with CSS

I am currently working on a webpage that consists of one main div housing two inner divs (left_menu and content), along with an additional footer div outside the main container. When viewing the page, there seems to be a noticeable gap between the footer ...

htmlcss

"Utilizing FileReader to seamlessly integrate data into FormData without the risk

Currently, I'm in the process of constructing an ajax file uploader. This is made possible thanks to the recently introduced FormData interface. Everything seems to work as expected when using the original file. However, I encounter issues when conver ...

javascriptajaxhtml