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;*/
}

      

+3


source to share


1 answer


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.

0


source







All Articles