Grouping text and images together
I feel like it should be easy. But I was out of luck.
I am creating a website with a table. The table has headers containing text to describe the column and an image. For more information, users can hover over the image.
But I can see that the text and the image are not the same with each other. Instead, the image wraps around a new line. those. for thin columns.
I want to prevent this from happening. So far, the only success I've had was using a different table in the table header. Which seems ridiculous.
How can I achieve this?
My html with some attempts.
<table class="inline">
<tr>
<th>TextA <img class="info" src="/images/info.png" onmouseover="ShowInfo()"/></th>
<th><table><tr><td>TextB</td> <td><img class="info" src="/images/info.png" onmouseover="ShowInfo()"/></td></tr></table></th>
<th><span style="display: inline-block;">TextC <img class="info" src="/images/info.png" onmouseover="ShowInfo()"/></span></th>
<th>TextD <img class="info" src="/images/info.png" onmouseover="ShowInfo()"/></th>
<th>TextE <img class="info" src="/images/info.png" onmouseover="ShowInfo()"/></th>
</tr>
</table>
My style sheet
.info {
width: 16px;
height: 16px;
float: right;
}
.inline {
white-space: nowrap;
/*overflow: hidden;*/
/*display: inline-block;
table-layout:fixed;*/
}
source to share
Images and text are inline elements by default. If they don't get enough space, they wrap to the next line. Fix this by installing:
th {
white-space: nowrap;
}
This forces you to keep all inline elements (both display: inline
and display: inline-block
) on the same line and push the borders th
to make it wider.
Also, you shouldn't use tables to achieve a specific layout. Tables must contain tabular data. CSS was invented for style control.
source to share