CSS Basics Exercise 1 -Table

HTML/CSS
1

The table I created is identical to Mosh’s, however the footer element is grey and not blue and the text is black. The styles I applied is identical when compared to the solution, but the table isn’t the same as Mosh’s.

I used :nth-child selector to make odd rows grey, but this style is overriding the styles of the footer element…

The styles I applied is identical to his. From top to bottom and in the same order. I have made sure my html doc matches his as well. I have tried inspecting Mosh’s Table in the browser as well as mine(side to side). Cannot find the difference. I’m not sure what’s wrong.
this is what my style sheet look like:

body{
margin: 10px;
}

table, td, th {
border: 1px solid #c4dcf3;
border-left: 0;
border-right: 0;
border-collapse: collapse;
}
td, th {
padding: 10px;
}
th {
background-color: #427fef;
color: white;
}
tr:nth-child(odd){
background-color: #eef7ff;
}
tfoot{
text-align: left;

}

I have tried applying styles separately or adding it next to ‘th’ selector, but somehow the nth child is overriding.

2

I tested the css he provided in the course with the stylesheet you provided. It looks fine on my end. See below

image

You should attach your html as well so others can see the entire project.

hit the </> button on the message editor when you reply and you can paste your code between the backticks. Below is the css from the course exercise

body {
  margin: 10px;
}

table, td, th {
  /* I've set all the borders using the border property
  and then removed the left and right border. Alternatively,
  we could set border-top and border-bottom properties but 
  that would result in the repetition of the color. If we
  want to change the border color, we have to change it in
  two places. */
  border: 1px solid #c4dcf3;
  border-left: 0;
  border-right: 0;
  border-collapse: collapse;
}

td, th {
  padding: 10px;
}

th {
  background-color: #427fef;
  color: white;
}

tr:nth-child(odd) {
  background-color: #eef7ff;
}

tfoot {
  text-align: left;
}
3

Well, your code has some syntax error; you can try the correct code below.

body {
  margin: 10px;
}

table,
td,
th {
  border: 1px solid #c4dcf3;
  border-left: 0;
  border-right: 0;
  border-collapse: collapse;
}

td,
th {
  padding: 10px;
}

th {
  background-color: #427fef;
  color: white;
}

tbody tr:nth-child(odd) {
  background-color: #eef7ff;
}

tfoot tr {
  background-color: transparent;
}

tfoot {
  text-align: left;
}

Thanks

4

Not sure where you are seeing syntax errors. The css is not formatted, but that will not break functionality. I copied the css that @jinid provided, downloaded the courses source html, formatted the code @jinid provided , and then ran a diff on it just to make sure it was identical. The css you provided expands on the original css. Nothing wrong with that, other than it could lead @jinid down a path that isn’t needed.

The screenshot I provided was using the course’s html, and the css from the @jinid . Maybe I am missing something, but looks the same to me. This means maybe there is something other than the css causing the issue…

My conclusion is @jinid should provide the html and all other resources that are referenced in their version of the solution.

5

Hi, this is what the html doc looks like.

Country OrderID Order Amount
USA 1000 $1300
USA 1001 $700
CA 1002 $2000
CA 1003 $1000
Total $5000
6

I just copied and pasted the html code but it just turned into a table… and the ‘colspan=2’ for the footer just disappeared, where the “Total” has to expand 2 columns. but as you can see the skeleton is basically correct. I just don’t know why it isn’t working on my end. I tried the css @gulshan212 provided and it still isn’t looking right. The footer is trasparent, without color.

7

I think something must be wrong with HTML then,
Here is my HTML code

<body>
    <table>
        <thead>
            <tr>
            <th>Country</th>
            <th>OrderID</th>
            <th>Order Amount</th>
            </tr>
        </thead>
        <tbody>
        <tr>
            <td>USA</td>
            <td>1000</td>
            <td>$1,300</td>
        </tr>
        <tr>
            <td>USA</td>
            <td>1001</td>
            <td>$700</td>
        </tr>
        <tr>
            <td>CA</td>
            <td>1002</td>
            <td>$2,000</td>
        </tr>
        <tr>
            <td>CA</td>
            <td>1003</td>
            <td>$1,000</td>
        </tr>
        </tbody>
        <tfoot>
            <tr>
                <th>Total</th>
                <th></th>
                <th>$5,000</th>
            </tr>
        </tfoot>
    </table>
</body>

Here is the CSS code

table,th,td{
    border-bottom: 1px solid #c4dcf3;
    border-collapse: collapse;
}
th{
    color: white;
    background-color:#427fef;
}
td,th{
    padding: 10px;
}
tr:nth-child(odd){
    background-color:#eef7ff;
}
tfoot{
    text-align: left;
}

This one works perfectly fine.

1 Like
8

How does the tfoot know to be the dark blue color if its only on the th?

9

it’s cause there is a th inside the footer

10

Cool that seemed to work. I was using tr

1 Like