HTML Question - Need odd columns highlighted only-CodePudding

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 >Description</th>
      <th>Nights</th>
      <th>Cost per Person</th>
    </tr>
  </thead>
  <tbody>
    <tr >
     <td>Weekend Escape</td>
     <td >Two breakfasts, a trail map, and a picnic snack</td>
     <td>2</td>
     <td>$450</td>
    </tr>
    <tr>
     <td>Zen Retreat</td>
     <td >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 >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!!!

CodePudding user response：

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 >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>

CodePudding user response：

in your css add

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