Why column of table so wide? - html

Question

I'm backend developer and have spring boot project with template engine thymeleaf.
I have table. Last column has 3 icons-hyperlinks.
My css style:
td.last {
width: 1px;
white-space: nowrap;
}
My html:
<table class="table table-stripped table-bordered">
<thead>
<tr>
<th>Column1</th>
<th>Column2</th>
<th>Column3</th>
<th>Column4</th>
<th class="col-md-1">Column5</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
...
<tr>
<td>9</td>
<td>Foo</td>
<td>Bar</td>
<td></td>
<td>
<span class="glyphicon glyphicon-tasks" aria-hidden="true"></span>
<span>41</span>
</td>
<td>
<span style="display:inline-block;">
<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>    
<span class="glyphicon glyphicon-trash" aria-hidden="true"></span>    
<a style="display: null" href="/link2?param1=FooBar"><span class="glyphicon glyphicon glyphicon-stats" aria-hidden="true"></span></a>
</span>
</td>
</tr>
</tbody>
</table>
Why my last column so wide?

Answer 1

I am not seeing classname last on your td.. I think you might mean :last-child. Change your td.last css style to below one..
td:last-child{
width:20px;
display:inline-block;
overflow: hidden;
}
See the Snippet below:
table{
width: 100%;
}
td:last-child{
width:20px;
display:inline-block;
overflow: hidden;
}
<table>
<tr>
<td>Name</td>
<td>Number</td>
<td>Address</td>
<td>Action</td>
</tr>
<tr>
<td>James</td>
<td>1212121</td>
<td>USA</td>
<td>Edit Delete Graph</td>
</tr>
</table>
You can test it here also.