Table header background color not filling entire cell

Posted on 2006-05-04
Last Modified: 2012-06-27
I have a table header with a background color.  Problem is, I have some header cells that have one line of text and others with two lines.  The two line cells have a background color that pretty much fills the cell, but the one line cells have the background color only around the text with white space above and below.  

Here are my current CCS properties for the header...

table.sortable a.sortheader {
    background-color: #e0b4a6;
    color: black;
    font-weight: bold;
    text-decoration: underline;
    display: block;
      PADDING-RIGHT: 4px;
      PADDING-LEFT: 4px

Question by:jribble
    LVL 30

    Accepted Solution

    set the background on the cell, not on the <a>... something like this:

    table.sortable th {
        background-color: #e0b4a6;

    you might need to add a class on your <th> and use this:

    table.sortable th.sortheader  {
        background-color: #e0b4a6;

    Author Comment

    The first suggestion worked fine.

    table.sortable th {
        background-color: #e0b4a6;

    LVL 30

    Expert Comment


    Featured Post

    How to run any project with ease

    Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
    - Combine task lists, docs, spreadsheets, and chat in one
    - View and edit from mobile/offline
    - Cut down on emails

    Join & Write a Comment

    Suggested Solutions

    When applying CSS to your HTML, there are many different ways to select which element(s) the CSS applies to.  Some of these selectors are more commonly known and used than others - Here are the more common ones: #X - Matches an ID of X .X - Matche…
    Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
    In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
    In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …

    746 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    18 Experts available now in Live!

    Get 1:1 Help Now