What is the best way to add color to a Table Header?

I'm working on a HTML/CSS table and I want the header row to have a specific background color. Below is my code:

<table class="contentTable">
        <tr class="contentTableHeader">
            <th>No.</th>
            <th>Dienstleistung</th>
            <th>Stunden</th>
            <th>Preis</th>
            <th>Netto</th>
        </tr>
         ....

Here is my CSS:

.contentTable {
             padding-top: 10mm;
             table-layout: auto;
             width: 100%;
             max-width: 100%;
         }

         .contentTable th {
             font-size: medium;
         }

         .contentTable td {
             font-size: small;
         }

         .contentTableHeader {
             background-color: cornflowerblue;
             color: azure;
         }

The issue I'm facing is that the cell separators remain white. How can I make the header row completely the same color?

https://i.stack.imgur.com/FmGCH.png

htmlcss

Answer №1

To enhance the appearance of your table, make sure to include the border-spacing property and set it to 0px.

.contentTable {
    padding-top: 10mm;
    table-layout: auto;
    width: 100%;
    max-width: 100%;
    border-spacing: 0px;
}

.contentTable th {
    font-size: medium;
}

.contentTable td {
    font-size: small;
}

.contentTableHeader {
    background-color: cornflowerblue;
    color: azure;
}
<table class="contentTable">
  <tr class="contentTableHeader">
    <th>No.</th>
    <th>Service</th>
    <th>Hours</th>
    <th>Price</th>
    <th>Net</th>
  </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

Refreshing certain sections of a webpage without the need to refresh the entire page

If you want to understand better, it would be helpful if you could check out my website first at: The main part of the website is a stream from Own3D.tv displayed through an iframe (line 342). My objective is to have the ability to click on a specific str ...

phpjavascripthtmlcssajax

What is the best way to include multiple selected option values from select2 in form.serialize()?

I am trying to use select2 for selecting multiple options in HTML and then send the selected values as an array using form.serialize() to update a database field. However, my form also contains other input fields. How can I achieve this? Here is my HTML c ...

jqueryhtmlajaxjquery-select2

Make the HTML element expand to the remaining height of the viewport

Need help with creating a section that automatically fills the remaining viewport height below the navigation bar. The section includes a centered div and background image, along with a button at the bottom for scrolling down by one full viewport height. H ...

cssviewport

How can we prevent the modal from extending beyond the boundaries of the phone screen when zoomed in

I am currently developing a web application that features a large content page, specifically a map which should display detailed information upon zooming in similar to Google Maps. The interactive elements on my map are clickable, triggering a modal popup ...

javascriptcssangularjstwitter-bootstrapbootstrap-modal

Enable only the current week days on the multiple date picker feature

Can anyone recommend a date picker that only shows the current week and allows for multiple date selections by the user? I found this jsfiddle which limits the display to the current week, but it doesn't support selecting multiple dates. I attempted ...

javascriptjqueryhtmlcss

Issue with Angular / SCSS where animation is not being executed on the specified element

I have created a post component with a comment section. However, when I click on the comments, I want them to display smoothly with a nice animation effect. Even though I have added the necessary code for animations, it doesn't seem to work as expecte ...

cssangularanimationsass

The implementation of modal pop-ups is resulting in unresponsive touch areas on mobile devices and tablets

I recently finished putting together a one-page website using Twitter Bootstrap, based on a theme from Themeforest that I heavily customized. However, when viewing the site on a mobile or tablet, I noticed an issue where the top 2/3 of the page is unrespon ...

phpjquerycsstwitter-bootstrap

What is the best way to adjust the scroll speed within a specific element using React?

Hey there, I'm currently working on adjusting the scroll animation of a div (MUI Container) to make it smoother and slower. I've spent some time searching online for a solution but haven't found anything helpful so far... By the way, I' ...

javascriptcssreactjsmaterial-uiscroll

Text parsing with jQuery

Hello fellow developers. I am interested in creating a text parser using jQuery. My goal is to develop a function that can take a string as input and convert it accordingly. Imagine we have a div with the following HTML structure: <div class="item"> ...

javascriptjqueryhtmlparsingtext

Center align a font-awesome icon vertically next to a paragraph of text

Is there a way to align a font-awesome icon on the left side of a text paragraph while keeping the text on the right side, even if it's longer and wraps underneath the icon? I've tried various code snippets but haven't found a solution yet. ...

htmlcss

The swf file doesn't stretch to fit the window when the height is set to 100%

Struggling with creating a flash recorder controlled by JavaScript? Trying to get the flash to fill the browser window but disappearing when setting height or width to 100%? Where am I going wrong? <div id="flashrecorder"> <object wmode="trans ...

javascripthtmlactionscript-3flash

Incorporating a Bootstrap table within another table and adjusting the table height

I am facing a minor issue on my website. I am utilizing bootstrap 4 and within the table box, I have nested another table as shown in the image below. How can I adjust the height of the inner table to match the height of the box (td)? https://i.sstatic.ne ...

htmlcsshtml-tabletwitter-bootstrap-4

What is the best way to make the first <p> tags bold within an array?

I tried using ::first-line, but it bolds all the p tags in the array. What I want is to only bold the first p tag which contains "Hello". <div v-for="item in first" :key="item.id"> <p class="cat_name" >{{ ...

cssvue.js

"Troubleshooting WordPress website: issues with CSS and images not

I recently developed a custom WordPress theme and everything was working perfectly on my local machine. However, when I moved the theme to the server, the CSS and images are not displaying properly. Strangely enough, when I checked the 'view source&ap ...

phphtmlcsswordpresswordpress-theming

Leveraging the browser's built-in validation error messages in Angular for HTML forms

Is there a way to incorporate browser's native HTML validation error messages into Angular applications? What I am looking for is the ability to leverage the built-in error messages when working with reactive forms like this: testForm: FormGroup = th ...

htmlangularvalidationconstraint-validation-api

The dropdown menu failed to display properly as intended

I'm encountering an issue with the CSS for my menu. Here is a screenshot of the dropdown menu: Whenever I hover over the submenu, it drops down along with the parent menu container. Please take a look and let me know what might be causing this probl ...

htmlcss

Issue with fixed sidebar on brief content

It's interesting how the sticky widget performs differently on long articles compared to short ones on my website. Here is an example of a long article where the sticky widget works well without any lag: . Now, let's take a look at a shorter art ...

javascriptjqueryhtmlcss

Horizontal Scroll HTML

Currently in the process of building a website for my father, everything is going smoothly. I followed a helpful Stackoverflow tutorial to create a specific webpage that I now want to customize with a hyperlink and make it scroll horizontally: Sliding divs ...

htmlcss

The flask application encounters a 404 error when trying to access the favicon.ico file

Upon reviewing my logfile, I noticed numerous entries indicating attempts to load files like /favicon.ico GET - /favicon.ico GET - /apple-touch-icon.png GET - /apple-touch-icon-precomposed.png I have researched this issue extensively online, but have bee ...

htmlbrowserflask

Creating unique identifiers and names for dynamically generated editable HTML table cells using JavaScript

Clicking the button will trigger the GenerateTable() function to dynamically create a table based on selected options from the drop-down menu as column headings. Below is the JavaScript code, along with instructions on how to assign IDs and names to each t ...

javascriptjqueryhtml