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

Make the div disappear upon clicking the back button in the browser

When a user selects a thumbnail, it triggers the opening of a div that expands to cover the entire screen. Simultaneously, both the title and URL of the document are modified. $('.view-overlay').show(); $('html,body').css("overflow","h ...

javascriptjqueryhtmlcss

The drop-down menu does not maintain its selected option after the window is refreshed

I am struggling with a dropdown list as shown below: <select class="span2" id ="sort" name= "order_by"> <option >Default</option> <option >Price</option> <option >Color</option> ...

javascriptjqueryruby-on-railshtml

No matter how much I try, the text refuses to align with the top-left corner

I have been working on creating a loading screen, but I am facing an issue with aligning the h1 tag selected to the top left. As a young developer at the age of 13, I am quite confused. I attempted to use the following CSS properties: vertical-align: top; ...

htmlcsssvgloadingloader

The font styles shift and vertical bars vanish when placed under images

I'm currently facing some challenges with the text placement beneath the images on my website that I am constructing: 1) The font for "Back to home page" unexpectedly changes from the specified style (Georgia, 0.9em) in Firefox but remains consistent ...

cssimagefonts

What alternative can be used for jquery isotope when JavaScript is not enabled?

Is there a backup plan for jQuery isotope if JavaScript isn't working? For instance, if I'm using the fitColumns feature, is there an alternative layout style available in case JavaScript is disabled, similar to what is seen on the new Myspace? ...

javascriptjqueryhtmlcssjquery-isotope

Position footer at the bottom of the webpage and adjust the height to be filled with main content using Bootstrap 4

I am currently in the process of designing a bootstrap layout that includes a header navbar along with a footer. My goal is to ensure that the footer is always at the bottom of the page, even if there is limited content. Here's what I have implemente ...

htmlcsstwitter-bootstrapbootstrap-4

Prevent fluctuations in container height + tips for aligning a list item at the bottom

In my jsFiddle demo here, I have implemented a vertical menu. Upon hovering on the icon, I would like the description of that menu to appear with a fade effect. Q1: However, during the fading transition, the text in the description wraps into a new line, ...

css

Manipulating database records with Laravel 5.0: deleting and modifying data

Is there a way to manage database entries in Laravel 5.0 using the public functions destroy and edit? I am working on my library and need to make changes to the database entries @foreach ($allJobs as $job) <tr> <td><img src="{{ ...

phphtmllaravel

Move the width from left to right with animation

Currently, I am exploring ways to use jQuery to create an animation effect on a div where the width shrinks from left to right. My first step is to have the element animate as follows: Slide in from left to right Then continue moving to the right off th ...

jquerycss

Ways to create collapsible navigation bars in your website

As someone exploring client-side development, I may be misusing the term "collapsible" in my title. What I aim to accomplish in my web application is allowing users to collapse header bars into small chevrons and expand them back when necessary. I am on t ...

javascripthtmlcsstwitter-bootstrapnavigation

Retrieve the text content within HTML tags that come after a specific paragraph using the DOM

I am looking to extract content from HTML documents. Specifically, I need the contents of all 'p' tags that come after 'h2' tags. Here is an example of the HTML to be parsed: <h1>Lorem ipsum</h1> <p> Lorem ipsum ...

phphtmldomdocument

Eliminating unnecessary whitespace between the bottom of the document and an element

I have a HTML page that when scrolled should limit scroll to the document height. It must not exceed the bottom of an element. Here is a screenshot for better understanding: https://i.stack.imgur.com/RaVg8.jpg The scrolling should be limited after the En ...

javascriptjqueryhtmlcss

Utilize TypeScript File array within the image tag in HTML with Angular 2

I am in the process of developing a web application that allows users to upload CSV data and images, which are then displayed on the application. However, I have encountered an issue where I am unable to display the imported images. The images are imported ...

htmlangulartypescript

What is the best way to extract text from a dynamically changing element using jQuery?

I've been struggling with a coding issue. Despite trying numerous approaches, I keep encountering the same problem where every new button I add ends up having the same text or, alternatively, nothing seems to work as expected. $j serves as my variabl ...

javascripthtmljquerynext.js

Tips for ensuring the vertical scroll bar is always visible on a div element

I need help with maintaining a vertical scroll bar on a div regardless of its height. .myclass { overflow-y: scroll; } <div class="myclass"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the in ...

javascripthtmljquerycss

Storing user data on the client side of a website is most effectively accomplished by

I am looking to incorporate the following features: I would like to personalize the user experience by greeting them with their login name on the webpage (e.g. 'Hello, Fred!'). I also want to display or hide certain content based on the user&apo ...

javascripthtmlsecurityweb

I am attempting to secure a webpage with a password using JavaScript

I've been working on adding password protection to my webpage at , with the goal of allowing users to enter the password once per session. However, I've encountered an issue: if a user cancels out of the initial prompt or enters the wrong passwor ...

javascripthtmlpassword-protection

Horizontal scrollbar displayed by CSS Bootstrap

Experimenting with Bootstrap on a small project and encountering an issue that I can't seem to figure out. Here is the snippet of my code: nav{ background-color: lightblue; } section{ background-color: lightgreen; } <link href="http://netd ...

csstwitter-bootstraptwitter-bootstrap-3

When viewed on a mobile device, the page defaults to displaying the NumPad instead of the Text Keyboard in Angular

The email field in my angular app is opening a Key Pad in mobile view and I'm not sure why. <form (ngSubmit)="onSubmit()" #emailForm="ngForm"> <div class="emailaddress" style="text-align:center;" *ngIf="!showEmail"& ...

htmlcssangular

How to ensure Angular mat-button-toggle elements are perfectly aligned within their respective groups

https://i.stack.imgur.com/Wjtn5.png Hello there, I'm trying to make the numbers in the first group match the style of the second group (noche, mañana...). I've set both the group and individual element width to 100%, but the numbers beyond 22 ...

htmlcssangulartypescriptangular-material