Question:
I am working with an html table that I would like in one of its cells to be able to display two images, the problem I have at the moment is that both images are together because of the styles that have been applied to them so far. so how can i add a space in the middle of both?
.text-content {
text-align: justify;
font-weight: bold;
font-size: 10pt;
}
.text-title {
text-align: center;
font-weight: bold;
font-size: 12pt;
color: #000;
}
.thubnail img {
float: left;
max-width: 50%;
box-sizing: border-box;
}
<table border="1">
<thead>
<tr>
<td width="8%">Item</td>
<td width="8%">Quantity</td>
<td width="10%">Size</td>
<td width="50%">Description</td>
<td width="10%">P/U</td>
<td width="14%">Total ($.)</td>
</tr>
</thead>
<tbody>
<tr>
<td width="8%" rowspan="2" class="text-content">1</td>
<td width="8%" rowspan="2" class="text-content">3</td>
<td width="10%" rowspan="2" class="text-content">12 x 6</td>
<td width="50%" class="text-title">test description</td>
<td width="10%" rowspan="2" class="text-content">2000</td>
<td width="14%" rowspan="2" class="text-content">6000</td>
</tr>
<tr>
<td rowspan="2" class="text-content">
Lorem ipsum dolor sit amet consectetur adipiscing elit dignissim, volutpat sapien tellus cubilia mollis sollicitudin nibh nisi curabitur, nullam semper mi duis erat pellentesque nunc. Quis cursus vulputate auctor habitant quisque nibh facilisi vivamus rutrum cubilia, cras dignissim suspendisse vel condimentum lectus cum mauris integer, aenean luctus augue vitae vestibulum quam ac purus parturient.
<div class="thubnail">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/77020/desmond.jpg" alt="Desmond">
</div>
<div class="thubnail">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/77020/desmond.jpg" alt="Desmond">
</div>
</td>
</tr>
</tbody>
</table>
Answer:
I think you can solve it like this:
- remove the
float
from thethubnail
class and apply adisplay: flex;
- To the
img
tag separately apply awidth
and themargin
that I mentioned separately to give it a space in all its contour with respect to its parent container - Instead of having 2
div
each enclosing an image, leave only one and inside that place the 2 images; since the idea ofclass
is that you can apply the same styles to different elements; then with a container that encompasses both would be more correct I consider - You give the
img
tag a maximum width of90%
so that it adjusts according to the availableviewport
space.
Asking to have a result like this:
<style>
.text-content {
text-align: justify;
font-weight: bold;
font-size: 10pt;
}
.text-title {
text-align: center;
font-weight: bold;
font-size: 12pt;
color: #000;
}
.thubnail{
display: flex;
max-width: 50%;
box-sizing: border-box;
}
img {
max-width: 90%;
margin: 2px;
}
</style>
<table border="1">
<thead>
<tr>
<td width="8%">Item</td>
<td width="8%">Quantity</td>
<td width="10%">Size</td>
<td width="50%">Description</td>
<td width="10%">P/U</td>
<td width="14%">Total ($.)</td>
</tr>
</thead>
<tbody>
<tr>
<td width="8%" rowspan="2" class="text-content">1</td>
<td width="8%" rowspan="2" class="text-content">3</td>
<td width="10%" rowspan="2" class="text-content">12 x 6</td>
<td width="50%" class="text-title">test description</td>
<td width="10%" rowspan="2" class="text-content">2000</td>
<td width="14%" rowspan="2" class="text-content">6000</td>
</tr>
<tr>
<td rowspan="2" class="text-content">
Lorem ipsum dolor sit amet consectetur adipiscing elit dignissim, volutpat sapien tellus cubilia mollis sollicitudin nibh nisi curabitur, nullam semper mi duis erat pellentesque nunc. Quis cursus vulputate auctor habitant quisque nibh facilisi vivamus rutrum cubilia, cras dignissim suspendisse vel condimentum lectus cum mauris integer, aenean luctus augue vitae vestibulum quam ac purus parturient.
<div class="thubnail">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/77020/desmond.jpg" alt="Desmond">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/77020/desmond.jpg" alt="Desmond">
</div>
</td>
</tr>
</tbody>
</table>