CODEWITHSUNDEEP
htmlcss
Ellena Michaelis
Ellena Michaelis

Reputation: 39

HTML Question - Need odd table columns highlighted only

table {
  border: 2px solid #3399CC;
  border-collapse: collapse;
}
td { padding: 0.5em;
  border: 2px solid #3399CC;
}
th { padding: 0.5em;
  border: 2px solid #3399CC;
}
td { text-align: center;
}
.text { text-align: left; 
}
td:nth-child(odd) { background-color: #F5FAFC; }
<div id="special">
        <h3>Yurt Packages</h3>
        <p>A variety of luxury yurt packages are available. Choose a package below and contact us to begin your reservation. We’re happy to build a custom package just for you!</p>
<table>
  <thead>
    <tr>
      <th>Package Name</th>
      <th class="text">Description</th>
      <th>Nights</th>
      <th>Cost per Person</th>
    </tr>
  </thead>
  <tbody>
    <tr >
     <td>Weekend Escape</td>
     <td class="text">Two breakfasts, a trail map, and a picnic snack</td>
     <td>2</td>
     <td>$450</td>
    </tr>
    <tr>
     <td>Zen Retreat</td>
     <td class="text">Four breakfasts, a trail map, a picnic snack, and a pass for the daily sunrise Yoga session</td>
     <td>4</td>
     <td>$600</td>
    </tr>
    <tr>
     <td>Kayak Away</td>
     <td class="text">Two breakfasts, two hours of kayak rental daily, and a trail map</td>
     <td>2</td>
     <td>$500</td>
    </tr>
  </tbody>
</table>
</div>
What you see here is HTML and CSS code for a table, that is supposed to be white and blue.

INSTRUCTIONS ask that the ODD columns are BLUE, but instead everything has a blue background. I cannot figure it out :( help appreciated, thanks!!!

Upvotes: 0

Views: 70

Answers (3)

Poly
Poly

Reputation: 26

Please check the code below. If you want the table header in a different color then you are nesting thead tr selectors and setting the background color from the CSS.

table {
  border: 2px solid #3399cc;
  border-collapse: collapse;
}
thead tr {
  background-color: #140c12;
  color: #fff;
}
th {
  padding: 0.5em;
  border: 2px solid #3399cc;
}
td {
  padding: 0.5em;
  border: 2px solid #3399cc;
  text-align: center;
}
tbody tr:nth-child(odd) {
  background-color: #eb7d4b;
}
.text {
  text-align: left;
}
<div id="special">
  <table>
    <thead>
      <tr>
      <th>Package Name</th>
      <th class="text">Description</th>
      <th>Nights</th>
      <th>Cost per Person</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Weekend Escape</td>
        <td class="text">
          Two breakfasts, a trail map, and a picnic snack
        </td>
        <td>2</td>
        <td>$450</td>
      </tr>
      <tr>
        <td>Zen Retreat</td>
        <td class="text">
          Four breakfasts, a trail map, a picnic snack, and a pass for the
          daily sunrise Yoga session
        </td>
        <td>4</td>
        <td>$600</td>
      </tr>
      <tr>
        <td>Kayak Away</td>
        <td class="text">
          Two breakfasts, two hours of kayak rental daily, and a trail map
        </td>
        <td>2</td>
        <td>$500</td>
      </tr>
      <tr>
        <td>Kayak Away</td>
        <td class="text">
          Two breakfasts, two hours of kayak rental daily, and a trail map
        </td>
        <td>3</td>
        <td>$800</td>
      </tr>
    </tbody>
  </table>
</div>

Upvotes: 0

Ryan O&#39;D
Ryan O&#39;D

Reputation: 350

Here is CSS that will get the job done at the table cell level. If you don't want the table header to have the blue and white colors, just remove the th selectors from the CSS.

th:nth-child(even), td:nth-child(even) {
  background: white;
  }
th:nth-child(odd), td:nth-child(odd) {
  background: blue;
  }
<table>
<thead>
<tr>
  <th>Package Name</th>
  <th class="text">Description</th>
  <th>Nights</th>
  <th>Cost per Person</th>
</tr>
</thead>
<tbody>
<tr>
  <td>This is stesg</td>
  <td>This is stesg</td>
  <td>This is stesg</td>
  <td>This is stesg</td>
</tr>
<tr>
  <td>This is stesg</td>
  <td>This is stesg</td>
  <td>This is stesg</td>
  <td>This is stesg</td>
</tr>
</tbody>
</table>

Upvotes: 1

DCR
DCR

Reputation: 15685

in your css add

tr:nth-child(odd){
   backgound-color:blue;
}

Upvotes: 0

Related Questions