Question 137036 in Html Question posted in
Some basic documentation can be found here.

Html – Why is my inline style not being applied to table column?

I want to have a simple table consisting of 7 columns and x rows (Monday,….,Sunday) & 1 – 365
i want the background-color of col-saturday and col-sunday to be red

this is how my CSS (external, in the same folder) looks:

*{
background-color:black;
color:white;
}
table{
width:100%;
}
th,td{
border:2px solid white;
border-collapse:collapse;
background-color:black;
}
tr:hover td{
background-color:green;
}

this is how my code looks like for the table:

<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Homepage</title>
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="stylesheet" href="styless.css">
</head>
<body>
<table>
   <colgroup>
      <col span="5">
      <col span="2" **style="background-color:red"**>
   </colgroup>
   <tr>
      <th>Monday</th>
      <th>Tuesday</th>
      <th>Wednesday</th>
      <th>Thursday</th>
      <th>Friday</th>
      <th>Saturday</th>
      <th>Sunday</th>
   </tr>
   <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
      <td>7</td>
   </tr>
</table>
</body>
</html>

how it looks like; no red background-color

i don’t get why cols sat and sun won’t be red.
i thought inline styles have the highest priority, or am i missing something else?

when i unlink the .css from my code it looks like this:

.css unlinked; red background-color

Tags:

2

Answers


  1. 0

    Since it’s not a MUST in your request, I would do it without <colgroup> and implement everything via CSS, so you have more flexibility in my opinion. The key is to select the last 2 child elements. You can achieve this by using the :nth-child(n) selector like so :nth-child(-n+2). Have a look, hope that helps.

    /* CSS for the 1st table */
table.demo1 {
    width: 100%;
    border: 2px solid black;
    background-color: black;
    color: white;
}
table.demo1 th, td {
    border: 2px solid white;
    background-color: black;
}
table.demo1 tr:hover td {
    background-color: green;
}
table.demo1 tr th:nth-last-child(-n+2), 
table.demo1 tr td:nth-last-child(-n+2) {
    background-color: red;
}

/* CSS for the 2nd table */
table.demo2 {
    width: 100%;
    border: 2px solid black;
    background-color: black;
    color: white;
}
table.demo2 th, td {
    border: 2px solid white;
    background-color: black;
}
table.demo2 tr td:hover {
    background-color: green;
}
table.demo2 tr th:nth-last-child(-n+2), 
table.demo2 tr td:nth-last-child(-n+2) {
    background-color: red;
}

/* CSS for the 3rd table */
table.demo3 {
    width: 100%;
    border: 2px solid black;
    background-color: black;
    color: white;
}
table.demo3 th, td {
    border: 2px solid white;
    background-color: black;
}
table.demo3 tr:hover td {
    background-color: green;
}
table.demo3 tr:hover td:nth-last-child(-n+2) {
    background-color: red;
}
table.demo3 tr th:nth-last-child(-n+2) {
    background-color: red;
}
    <table class="demo1">
   <tr>
      <th>Monday</th>
      <th>Tuesday</th>
      <th>Wednesday</th>
      <th>Thursday</th>
      <th>Friday</th>
      <th>Saturday</th>
      <th>Sunday</th>
   </tr>
   <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
      <td>7</td>
   </tr>
   <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
      <td>7</td>
   </tr>
   <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
      <td>7</td>
   </tr>
</table>
<br>
<table class="demo2">
   <tr>
      <th>Monday</th>
      <th>Tuesday</th>
      <th>Wednesday</th>
      <th>Thursday</th>
      <th>Friday</th>
      <th>Saturday</th>
      <th>Sunday</th>
   </tr>
   <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
      <td>7</td>
   </tr>
   <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
      <td>7</td>
   </tr>
   <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
      <td>7</td>
   </tr>
</table>
<br>
<table class="demo3">
   <tr>
      <th>Monday</th>
      <th>Tuesday</th>
      <th>Wednesday</th>
      <th>Thursday</th>
      <th>Friday</th>
      <th>Saturday</th>
      <th>Sunday</th>
   </tr>
   <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
      <td>7</td>
   </tr>
   <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
      <td>7</td>
   </tr>
   <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
      <td>7</td>
   </tr>
</table>
    Login or Signup to reply.
  2. 0

    td are inside colgroups. Therefore every direct styling of td (even in separate sheet) will take precedence over every colgroup styling.

    Try something like:

    th,td{
border:2px solid white;
border-collapse:collapse;
}
th{
background-color:black;
}

    Or try @Dimava suggestion, it will save you colgroups.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search