JSFiddle - React, Tailwind, and code Playground

by Kerrick

HTML

<table>
    <tbody>
        <tr>
            <td><!-- This cell left intentionally blank --></td>
            <td class="flexy">
                <img src="http://placekitten.com/1000/100" alt="Kitten" />
            </td>
            <td>
                This is some content
            </td>
        </tr>
    </tbody>
</table>

CSS

table {
    width: 400px;
    table-layout: auto;
    border: 1px solid red;
}
td.flexy {
    width: 100%;
}
img {
    max-width: 100%;
}

JavaScript

/*
In current versions of Webkit and Blink, the width of
the image is constrained to its parent as if the table width
were calculated *before* the table asks how much room
the content needs. That means the image was rendered so that
100% of its width is based on the leftover room in the table,
or 400px minus the determined width of the last <td>.

In current versions of Presto, Trident, and Gecko, the width of
the image is constrained to its parent as if the table width
were calculated *after* the table asks how much room
the content needs. That means the image was rendered so that
it could keep expanding because tables with table-layout: auto
will get wider based on their contents' needs, or the width
of the loaded image.

Not sure which is right, as both are logical based on the spec.
Yes, an <img> should have a width attribute, but in many
responsive designs, image widths are percentage based.
*/