将跨度内的图像对齐到表格单元格的右侧

Question

I made a JS Fiddle to show you what is currently happening.

https://jsfiddle.net/70z5Lm2r/2/

HTML

<table>
    <tbody>
        <tr>
            <td class="first">

            </td>
            <td class="second">
                <span>
                    <span onClick={doSomething} class="underline-hover">
                        <img src="pic.png" />
                        This is some clickable data. Sometimes it overflows.
                    </span>

                </span>
            </td>
        </tr>
    </tbody>
</table>

CSS

table {
    table-layout: fixed;
    word-wrap: break-word;
    width: 50%;
    max-width: 100%;
}

td {
    border: 1px solid black;
}

.first {
    width: 40%;
}

.second {
    width: 60%;
}

.underline-hover:hover {
    text-decoration: underline;
    cursor: pointer;
}

img {
    height: 20px;
    width: 20px;
    margin-top: 2px;
    margin-left: 8px;
    vertical-align: top;
    float: right;
}

As you can see, if you hover over the user icon, the underline affect happens on the text. This is because both the text and the image are within the span that has the underline-hover class and the onClick handler applied.

What I want to have happen is that when a hover happens on the text, only the text is highlighted. When a hover happens on the icon, nothing happens. However, I still want the icon to be flush to the right and the text to wrap accordingly as it currently is displayed.

What I have tried is taking the img tag out of the inner span like so:

<span>
    <span onClick={doSomething} class="underline-hover">
        This is some clickable data. Sometimes it overflows.
    </span>
    <img src="pic.png" />
</span>

This satisfies the behavior but the float property of the img tag causes it to be removed from the flow of the page, causing the text and icon to jumbled together.

Any help achieving the behavior and look that I want would be greatly appreciated.

Answer 1

Your attempt was very close. Because you're floating the img right, it needs to be before the <span> .

<span>
    <img src="pic.png" />
    <span onClick={doSomething} class="underline-hover">
        This is some clickable data. Sometimes it overflows.
    </span>
</span>

Next, make a style for .underline-hover with a margin-right:20px; Currently the span fills the width of it's container, so the img isn't triggering the hover, the span is. We create a margin the same width as the floated img, and you should be good to go.