Remove whitespace from table cell after image width reduction - html

Question

This is probably really easy but I'm stuck trying to remove whitespace from a table cell when reducing the width of a nested image.
Eg I want to remove the whitespace in this example
JSFiddle: https://jsfiddle.net/8qm61hny/
HTML:
<div class="qtest">
<div class="q_test">
<div class="q_top">
</div>
<div class="q_test99">
<table class="test_table">
<tbody>
<tr>
<td class="q_p1">1st</td>
<td class="q_p2"><img class="q_p2_img" src="//www.geek.com/wp-content/uploads/2009/01/1_google_logo.jpg"></td>
<td class="q_name">Name1</td>
</tr>
<tr>
<td class="q_p1">1st</td>
<td class="q_p2"><img class="q_p2_img" src="//www.geek.com/wp-content/uploads/2009/01/1_google_logo.jpg"></td>
<td class="q_name">Name2</td>
</tr>
<tr>
<td class="q_p1">1st</td>
<td class="q_p2"><img class="q_p2_img" src="//www.geek.com/wp-content/uploads/2009/01/1_google_logo.jpg"></td>
<td class="q_name">Name3</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
CSS:
.q_p2_img {
width:60%;
}
I've tried various css display options but cannot find what I need to do this.

Answer 1

Don't use percentage value because percentage value will get resolved after setting the parent width since we need a reference to resolve it. In your case, you will have 60% of the parent size and 40% of whitespace.
Use pixel value instead:
.q_p2_img {
width: 200px;
}
<div class="qtest">
<div class="q_test">
<div class="q_top">
</div>
<div class="q_test99">
<table class="test_table">
<tbody>
<tr>
<td class="q_p1">1st</td>
<td class="q_p2"><img class="q_p2_img" src="//www.geek.com/wp-content/uploads/2009/01/1_google_logo.jpg"></td>
<td class="q_name">Name1</td>
</tr>
<tr>
<td class="q_p1">1st</td>
<td class="q_p2"><img class="q_p2_img" src="//www.geek.com/wp-content/uploads/2009/01/1_google_logo.jpg"></td>
<td class="q_name">Name2</td>
</tr>
<tr>
<td class="q_p1">1st</td>
<td class="q_p2"><img class="q_p2_img" src="//www.geek.com/wp-content/uploads/2009/01/1_google_logo.jpg"></td>
<td class="q_name">Name3</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>

Answer 2

Use this minimum table css for cross-browser and responsive <table> styling
html
<div class="tbl">
<table>
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data 11</td>
<td>Data 12</td>
</tr>
<tr>
<td>MoreData 21</td>
<td>MoreData 22</td>
</tr>
</tbody>
</table>
</div>
css
.tbl {
width: 100%; /* table width */
box-sizing: border-box;
overflow-x: auto;
}
.tbl * {
margin: 0;
box-sizing: border-box;
}
table {
width: 100%;
border-spacing: 0;
border-collapse: collapse;
font-size: 0; /* remove gap */
}
thead, tbody, tr {
width: inherit;
}
th, td {
vertical-align: top;
text-align: left;
white-space: normal;
font-size: 16px;
}
#media (max-width: 767.9px) {
table {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
-ms-overflow-style: -ms-autohiding-scrollbar;
}
}