MariaJackson1
6/29/2017 - 8:28 PM

Calorie Count Table

/* Style Nutrition Facts of Featured Flavors */
.table-region {
  width: 475px;
}

table.nutrition caption {
 text-align: left;
 font-weight: bold;
 font-size: 1.25em;
 padding: .5em 11px 0;
}

strong {
  font-weight: bold;
}

table.nutrition th.daily_value {
    padding: 3px 98px 1px 0;
    font-size: .8em;
     text-align: right;
}

table.nutrition td.daily_value {
    padding: 0 98px 0 0;
    font-weight: bold;
    font-size: .85em;
    text-align: right;
}

table.nutrition td.sub {
    padding-left: 3em;
}

table.nutrition td {
    padding: 1px 11px 0;
    border: 0;
    border-top: 1px solid #d9d7d0;
}

table.nutrition tr.minerals td dt.first {
    padding-left: 0;
    background: none;
}

table.nutrition tr.minerals td dd {
    float: left;
    padding: 0 10px 0 8px;
}

table.nutrition tr.minerals td dt {
    float: left;
    padding: 0 0 0 13px;
    font-weight: normal;
    background: url(https://beanbar.demo.site/wp-content/uploads/2017/06/bullet.gif) no-repeat 0 28%;
}

table.nutrition dd {
  margin: 0;
}

table.nutrition {
  font-size: .85em;
}
<div class="table-region">
      <table class="nutrition" summary="This table summarizes nutritional information for a coffee drink">
        <caption>Nutrition Facts Per Serving (12 fl oz)</caption>
        <tbody>
          <tr>
            <td>
              <strong>Calories</strong> 350</td>
            <td>Calories from Fat 90</td>
          </tr>
          <tr>
            <th></th>
            <th class="daily_value">% Daily Value*</th>
          </tr>
          <tr>
            <td><strong>Total Fat</strong> 14g</td>
            <td class="daily_value">22%</td> 
          </tr>
          <tr>
            <td class="sub">Saturated Fat 9g</td>
            <td class="daily_value">45%</td>
          </tr>
          <tr>
            <td class="sub">Trans Fat 0g</td>
            <td></td>
          </tr>
          <tr>
            <td>
              <strong>Cholesterol</strong> 50mg
            </td>
            <td class="daily_value">17%</td>
          </tr>
          <tr>
            <td>
              <strong>Sodium</strong> 230mg
            </td>
            <td class="daily_value">10%</td>
          </tr>
          <tr>
            <td>
              <strong>Total Carbohydrate</strong> 72g
            </td>
            <td class="daily_value">24%</td>
          </tr>
          <tr>
            <td class="sub">Dietary Fiber 0g</td>
            <td class="daily_value">0%</td>
          </tr>
          <tr>
            <td class="sub">Sugars 68g</td>
            <td></td>
          </tr>
          <tr>
            <td>
              <strong>Protein</strong> 4g
            </td>
            <td class="daily_value"></td>
          </tr>
          <tr class="minerals">
            <td colspan="2">
              <dl>
                <dt class="first">Vitamin A</dt>
                <dd>10%</dd>
                <dt>Vitamin C</dt>
                <dd>0%</dd>
                <dt>Calcium</dt>
                <dd>15%</dd>
                <dt>Iron</dt>
                <dd class="last">0%</dd>
              </dl>
            </td>
          </tr>
          <tr>
            <td colspan="2">Caffeine 95mg**</td>
          </tr>
          <tr>
            <td colspan="2" class="note">*Percent Daily Values are based on a 2,000 calorie diet.</td> 
          </tr>
          <tr>
            <td colspan="2" class="note">**Each caffeine value is an approximate value.</td>
          </tr>
        </tbody>
      </table>
    </div>