Use image width as maximum size for table cell - html

Question

I will try to express what i want to achieve. Consider we have some text and image with caption, text must flow image to the left. So we will have html code like this:
.img-right {
float: right;
width: auto;
max-width:45%;
}
.img-right img {
width:auto;
display:block;
}
.img-label {
background-color:gray;
}
<table class="img-right">
<tr>
<td><img src="image1.jpg" /></td>
</tr>
<tr>
<td class="img-label"><p>Caption of an image</p></td>
</tr>
</table>
<p>Some main content here</p>
As you can see i would like table to be maximum width of 45%, but respect cells width.
And here comes the problem, i would like table width to be as image original width. In case of only image it is easy, but when i have some long image caption it will spread table width, so image will be smaller than table width.
What i want to achieve is that only image original width can control table width with the help of css and html only. So if image original width is smaller then max-width:45%, table width must be smaller, for example 30%, if image maximum size is greater than 45% or the same, then max-width:45% must be used as table width. Image sizes unknown, they can be different, so it is not allowed to directly use them in css or html.
I do research, and looks like it is impossible in pure css, but maybe you can help me, thanks!
Example of problem: http://jsfiddle.net/7xrLsyc3/11/

Answer 1

I would make it all in CSS and HTML with DIVs. This makes it also easier to make the site responsive for small screens. See my example:
http://jsfiddle.net/Preben/7xrLsyc3/4/
<div class="wrapimage">
<div class="image">
<img src="http://lorempixel.com/700/300/nature/" />
</div>
<div class="captiontext">
Caption of an image. Caption of an image. Caption of an image. Caption of an image. Caption of an image
</div>
</div>
And CSS:
.wrapimage {
float: right;
max-width:45%;
}
.image img {
max-width:100%;
display:block;
}
.captiontext{
margin-top:2px;
background-color:gray;
padding:2%;
}
And the media query as an example:
#media (max-width:500px){
.wrapimage {display:block;max-width:100%;margin-bottom:20px;}
}

Answer 2

The easiest way is to wrap your table inside another container because max-width and tables doesn’t play very well together.
.img-right {
float: right;
max-width:45%;
}
.table-img-right {
width: 100%;
}
.img-right img {
display: block;
width: 100%;
height: auto;
}
.img-label {
background-color:gray;
}
<div class="img-right">
<table class="table-img-right">
<tr>
<td><img src="http://placehold.it/500x500" /></td>
</tr>
<tr>
<td class="img-label"><p>Caption of an image</p></td>
</tr>
</table>
</div>
<p>Donec semper quam scelerisque tortor dictum gravida. In hac habitasse platea dictumst. Nam pulvinar, odio sed rhoncus suscipit, sem diam ultrices mauris, eu consequat purus metus eu velit. Proin metus odio, aliquam eget molestie nec, gravida ut sapien. Phasellus quis est sed turpis sollicitudin venenatis sed eu odio. Praesent eget neque eu eros interdum malesuada non vel leo. Sed fringilla porta ligula egestas tincidunt. Nullam risus magna, ornare vitae varius eget, scelerisque a libero. Morbi eu porttitor ipsum. Nullam lorem nisi, posuere quis volutpat eget, luctus nec massa. Pellentesque aliquam lacinia tellus sit amet bibendum. Ut posuere justo in enim pretium scelerisque. Etiam ornare vehicula euismod. Vestibulum. Morbi eu porttitor ipsum. Nullam lorem nisi, posuere quis volutpat eget, luctus nec massa. Pellentesque aliquam lacinia tellus sit amet bibendum. Ut posuere justo in enim pretium scelerisque. Etiam ornare vehicula euismod. Vestibulum. Morbi eu porttitor ipsum. Nullam lorem nisi, posuere quis volutpat eget, luctus nec massa. Pellentesque aliquam lacinia tellus sit amet bibendum. Ut posuere justo in enim pretium scelerisque. Etiam ornare vehicula euismod. Vestibulum.
</p>
<div class="img-right">
<table class="table-img-right">
<tr>
<td><img src="http://placehold.it/100x100" /></td>
</tr>
<tr>
<td class="img-label"><p>Caption of an image</p></td>
</tr>
</table>
</div>
<p>Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed molestie augue sit amet leo consequat posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus luctus urna sed urna ultricies ac tempor dui sagittis. In condimentum facilisis porta. Sed nec diam eu diam mattis viverra. Nulla fringilla, orci ac euismod semper, magna diam porttitor mauris, quis sollicitudin sapien justo in libero. Vestibulum mollis mauris enim. Morbi euismod magna ac lorem rutrum elementum. Donec viverra auctor lobortis. Pellentesque eu est a nulla placerat dignissim. Morbi a enim in magna semper bibendum. Etiam scelerisque, nunc ac egestas consequat, odio nibh euismod nulla, eget auctor orci nibh vel nisi. Aliquam erat volutpat. Mauris vel neque sit amet nunc gravida congue sed sit amet purus. Quisque lacus quam, egestas ac tincidunt a, lacinia vel velit. Aenean facilisis nulla vitae urna tincidunt congue sed ut dui. Morbi malesuada nulla nec purus convallis consequat. Vivamus id mollis quam. Morbi ac commodo nulla. In condimentum orci id nisl volutpat bibendum. Quisque commodo hendrerit lorem quis egestas. Maecenas quis tortor arcu. Vivamus rutrum nunc non neque consectetur quis placerat neque lobortis. Nam vestibulum, arcu sodales feugiat consectetur, nisl orci bibendum elit, eu euismod magna sapien ut nibh.</p>