How can I make the columns in my table stand out with different background colors?

Question

How can I make the columns in my table stand out with different background colors?

I'm currently working on implementing alternating background colors for columns in a table. I have successfully applied CSS to a simple table, but I am facing issues when dealing with more complex tables that involve rowspan and colspan. Can anyone offer guidance on how to approach fixing this issue?

The tables I am working with are all generated by someone else, so I do not have control over the HTML structure. The challenge is to create CSS that will work universally across all these tables.

You can view my CSS code in action at the following links:

or

http://codepen.io/anon/pen/ORPLgz

table.specialtable {
  border-top: 2px solid #00ABEF;
    border-bottom: 2px solid #00ABEF;
    background-colo: #FFF;
    font-size: 11px;
}

table.specialtable th {
    background-color: #B8E5FA;
    border-right: 1px solid #FFF;
    border-left: 1px solid #FFF;
    padding: 4px 2px;
}

table.specialtable td {
    padding: 4px 2px;
    text-align: center;
}

table.specialtable td:first-child {
    text-align: left;
}

table.specialtable td:nth-child(even){ 
 background-color: #E2F4FE;
}

table.specialtable td:nth-child(odd){ 
 background-color: #FFF;
}

html css css-tables

Answer 1

Answer №1

Wow, the markup here is quite unconventional but it gets the job done. I've simplified some of the unnecessary specificity while also incorporating SCSS - hope that works for you!

I've made some changes to your code and forked your pen at this link: http://codepen.io/memoblue/pen/yayBpA

Check out the key parts of the code below:

table {
  border-top: 2px solid #00ABEF;
    border-bottom: 2px solid #00ABEF;
    background-colo: #FFF;
    font-size: 11px;
}

table th {
    background-color: #B8E5FA;
    border-right: 1px solid #FFF;
    border-left: 1px solid #FFF;
    padding: 4px 2px;
}

table td {
    padding: 4px 2px;
    text-align: center;
}

table td:first-child {
    text-align: left;
}

table td:nth-child(even){ 
 background-color: #E2F4FE;
}

table td:nth-child(odd){ 
 background-color: #FFF;
}

.specialtable ~ table {
  tr:nth-child(2n) {
    td:first-child {
      background-color: #E2F4FE;
    }
    td:nth-child(2n) {
      background-color: #fff;
    }
    &:nth-child(8) {
      td:first-child {
        background-color: #fff;
      }
    }
  }
}

Answer 2

Wow, the markup here is quite unconventional but it gets the job done. I've simplified some of the unnecessary specificity while also incorporating SCSS - hope that works for you!

I've made some changes to your code and forked your pen at this link: http://codepen.io/memoblue/pen/yayBpA

Check out the key parts of the code below:

table {
  border-top: 2px solid #00ABEF;
    border-bottom: 2px solid #00ABEF;
    background-colo: #FFF;
    font-size: 11px;
}

table th {
    background-color: #B8E5FA;
    border-right: 1px solid #FFF;
    border-left: 1px solid #FFF;
    padding: 4px 2px;
}

table td {
    padding: 4px 2px;
    text-align: center;
}

table td:first-child {
    text-align: left;
}

table td:nth-child(even){ 
 background-color: #E2F4FE;
}

table td:nth-child(odd){ 
 background-color: #FFF;
}

.specialtable ~ table {
  tr:nth-child(2n) {
    td:first-child {
      background-color: #E2F4FE;
    }
    td:nth-child(2n) {
      background-color: #fff;
    }
    &:nth-child(8) {
      td:first-child {
        background-color: #fff;
      }
    }
  }
}

How can I make the columns in my table stand out with different background colors?

Answer №1

Similar questions

Encountering a 504-loadbalancer error (Gateway Time-out) on PythonAnywhere after waiting for 5 minutes for a response, despite setting SQLALCHEMY_POOL_RECYCLE to 600

Managing images in JavaScript while conserving memory

Insert metadata tag into the head element of the parent iframe

-=:Heading with a decorative vertical line=:-

There is a gap found in the span element in Angular, but this gap is not seen in

The issue with two different link styles displaying correctly in Internet Explorer but not in other browsers is that when a link is clicked, all links appear

Generate a Vue component that automatically wraps text dynamically

What is the reason behind a flex-item collapsing when it has a display property set to flex, unless it is assigned an explicit width of 100%

Prevent pinch zoom in webkit (or electron)

"Challenges Arising in Deciphering a Basic JSON Array

Activating/Deactivating a button with just a press

Customizable styling using SQL and PHP

I am unable to tap on the input field

Trouble with importing scss file in sass and bootstrap collaboration

Positioning elements within a Bootstrap column: Fixed versus Absolute positioning

Exploring the ins and outs of utilizing pseudo selectors with material-ui

Is this approach to implementing content security policy acceptable?

Adding HTML content to a statically served file using Flask

Can you please tell me the name of this specific graph? And could you explain how I can recreate it on a

output a string from the write_html function in plotly