turtlesallday turtlesallday - 1 year ago 66
CSS Question

Changing Table background

Below is code provided. Currently it is highlighting the text because of of the span tag. But I would like it to change the background color of that table value instead of highlighting the text. How would I go about this?



<c:choose>
<c:when test="${manifest.manifestRtnedDate == null}">
<td class="backgroundHighLight">
<c:if test="${manifest.daysOpened >35 && manifest.daysOpened < 45 }">
<span style="background-color: #FFFF00"><c:out value="${manifest.daysOpened }"/></span>
</c:if>

<c:if test="${manifest.daysOpened > 45 }">
<span style="background-color: #FF4747"><c:out value="${manifest.daysOpened }"/></span>
</c:if>
</td>
</c:when>
<c:otherwise>
<td>
<c:out value="${ manifest.manifestRtnedDate}" />
</td>
</c:otherwise>
</c:choose>




Answer Source

You're on the right track, here's two options. You can either:

  1. Keep your logic as-is, and try to add display: block; to the style of your span elements. This should make them fill the <td> elements. Or...

  2. Move the td element itself into the c:if blocks and style its background instead of the span (see example below).

<c:choose>

  <c:when test="${manifest.manifestRtnedDate == null}">

    <c:if test="${manifest.daysOpened >35 && manifest.daysOpened < 45 }">
      <td class="backgroundHighLight" style="background-color: #FFFF00">
        <span><c:out value="${manifest.daysOpened }"/></span>
      </td>
    </c:if>

    <c:if test="${manifest.daysOpened > 45 }">
      <td class="backgroundHighLight" style="background-color: #FF4747">
        <span><c:out value="${manifest.daysOpened }"/></span>
      </td>
    </c:if>

  </c:when>

  <c:otherwise>
    <td>
      <c:out value="${ manifest.manifestRtnedDate}" />

    </td>
  </c:otherwise>
</c:choose>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download