user1547174 user1547174 - 6 months ago 13
HTML Question

place three html tables side by side

can someone help me with placing three tables side by side? All of my current tables are stacked top to bottom. Here is my code below:

<table style="width:30%">
<tr>
<td><strong>Department:</strong></td>
<td><%= @opportunity.department %></td>
</tr>

<tr>
<td><strong>Agency:</strong></td>
<td><%= @opportunity.agency %></td>
</tr>
</table
<table style="width:30%">
<tr>
<td><strong>Department:</strong></td>
<td><%= @opportunity.department %></td>
</tr>

<tr>
<td><strong>Agency:</strong></td>
<td><%= @opportunity.agency %></td>
</tr>
</table
<table style="width:30%">
<tr>
<td><strong>Department:</strong></td>
<td><%= @opportunity.department %></td>
</tr>

<tr>
<td><strong>Agency:</strong></td>
<td><%= @opportunity.agency %></td>
</tr>
</table


Thanks!

Answer

First, you will need to close correctly your table tags like this

</table>

Second, table is a block element, so you will need to specify display:inline-block in table style like this:

<table style="width:30%;display:inline-block">