Horizontal Display Html Table

Question

I'm building a .xslt file to attach to my XML document. I use the following code to display my color code legend:

<footer width="100%">
    <table>
      <tr>
        <td><div style="background-color:#90EE90;width:15px;height:15px;border:1px solid #000;"></div>Nouveauté</td>
        <td><div style="background-color:#AFEEEE;width:15px;height:15px;border:1px solid #000;"></div>Modifié</td>
        <td><div style="background-color:#FFF;width:15px;height:15px;border:1px solid #000;"></div>Normal</td>
      </tr>
    </table>
  </footer>

---

Current result

Unfortunately, I get the following result:

---

Wanted result

Where as my actual result should look like this:

---

I also tried using list item tags in an unordered list with an inline style display. Also tried making the list items float left, got the same result... I'm not sure why it's not displaying correctly.

Answer 1

You can either use a span instead of div or use float:left on div

Check this fiddle