prevent column to expand when parent is width 100% - html

Question

I have a table where I specify width:100% but I don't want to expand one particular column(image column) to expand. It it possible?
Sample example:
body {}
img.consoleIcon,
img.ConsoleIconColumnHeader {
width: 17px !important;
height: 17px !important;
vertical-align: middle;
}
table td,
table th {
border: 1px solid #d0d0d0;
table-layout: fixed;
border-collapse: collapse !important;
}
<table>
<thead>
<th>Name</th>
<th>Age</th>
<th>Facebook</th>
<th>Twitter</th>
</thead>
<tbody>
<td>Shubh</td>
<td>33</td>
<td>
<a>
<img title="FB" class="consoleIcon" src="https://image.flaticon.com/icons/svg/124/124010.svg">
</a>
</td>
<td></td>
</tbody>
</table>
Now the above is simple example of a table without any width specified to it, now I go ahead & apply style width:100% but I don't want the image column(e.g Facebook) to expand.
body{
}
img.consoleIcon, img.ConsoleIconColumnHeader {
width: 17px !important;
height: 17px !important;
vertical-align: middle;
}
table td, table th{
border:1px solid #d0d0d0;
table-layout: fixed;
border-collapse: collapse !important;
}
<table style="width:100%">
<thead>
<th>Name</th>
<th>Age</th>
<th>Facebook</th>
<th>Twitter</th>
</thead>
<tbody>
<td>Shubh</td>
<td>33</td>
<td>
<a>
<img title="FB" class="consoleIcon" src="https://image.flaticon.com/icons/svg/124/124010.svg">
</a>
</td>
<td></td>
</tbody>
</table>

Answer 1

You can set the width on the td element.
Here I define an icon-cell class, on the td element, and I am setting a width in CSS :
img.consoleIcon, img.ConsoleIconColumnHeader {
width: 17px !important;
height: 17px !important;
vertical-align: middle;
}
table td, table th {
border: 1px solid #d0d0d0;
table-layout: fixed;
border-collapse: collapse !important;
}
.icon-cell {
width: 50px;
}
<table style="width:100%">
<thead>
<th>Name</th>
<th>Age</th>
<th>Facebook</th>
<th>Twitter</th>
</thead>
<tbody>
<td>Shubh</td>
<td>33</td>
<td class="icon-cell">
<a>
<img title="FB" class="consoleIcon" src="https://image.flaticon.com/icons/svg/124/124010.svg">
</a>
</td>
<td></td>
</tbody>
</table>

Answer 2

By applying the fixed width for table columns solved this problem.
Hope it is useful to you.
Here is my Code
<table style="width:100%">
<thead>
<th style="width:35%;">Name</th>
<th style="width:30%;">Age</th>
<th style="width:5%;">Facebook</th>
<th style="width:30%;">Twitter</th>
</thead>
<tbody>
<td>Shubh</td>
<td>33</td>
<td>
<a>
<img title="FB" class="consoleIcon" src="https://image.flaticon.com/icons/svg/124/124010.svg">
</a>
</td>
<td></td>
</tbody>
</table>
In CSS
body{
}
img.consoleIcon, img.ConsoleIconColumnHeader {
width: 17px !important;
height: 17px !important;
vertical-align: middle;
}
table td, table th{
border:1px solid #d0d0d0;
table-layout: fixed;
border-collapse: collapse !important;
}
Here is the Working Fiddle
[http://jsfiddle.net/1bn5ke9s/][1]