How to fixed the td width in table - html

Question

I use easyui-panel with one table in my project.
I want to fixed each td width:50px;
Here is my code:
<div class="easyui-panel" id="pp" style="margin-top:30px;width:100%">
<table class="uTbId" cellspacing="0" style="width:100%" >
<tr>
<td style="position:absolute;width:50px;background-color:#fafafa">stack</td>
<td style="position:absolute;width:50px;background-color:#fafafa">john</td>
<td style="position:absolute;width:50px;background-color:#fafafa">stock</td>
<td style="position:absolute;width:50px;background-color:#fafafa">shansa</td>
</tr>
<tr>
<td style="postion:absolute;width:50px;background-color:#fafafa">Joy</td>
</tr>
</table>
</div>
But it works fail. stack,john and stock are disappear. My table is in an abnormal stat.
When I deleted "position:absolute;width:50px;", all names can be show.like:
<div class="easyui-panel" id="pp" style="margin-top:30px;width:100%">
<table class="uTbId" cellspacing="0" style="width:100%" >
<tr>
<td style="background-color:#fafafa">stack</td>
<td style="background-color:#fafafa">john</td>
<td style="background-color:#fafafa">stock</td>
<td style="background-color:#fafafa">shansa</td>
</tr>
<tr>
<td style="background-color:#fafafa">Joy</td>
</tr>
</table>
</div>
All names can appear without fixed width, but it is not what i want.
Who can help me ?

Answer 1

You don't need to remove both position:absolute and width:50px.
Removing position:absolute and the width:100% from the <table> should result in what you want. So now your HTML looks like
<div class="easyui-panel" id="pp" style="margin-top:30px;width:100%">
<table class="uTbId" cellspacing="0">
<tr>
<td style="width:50px;background-color:#fafafa">stack</td>
<td style="width:50px;background-color:#fafafa">john</td>
<td style="width:50px;background-color:#fafafa">stock</td>
<td style="width:50px;background-color:#fafafa">shansa</td>
</tr>
<tr>
<td style="width:50px;background-color:#fafafa">Joy</td>
</tr>
</table>
If it doesn't result in what you want, it is possible that some CSS styles are adding additional padding or margins to the <td> element. Fire up the developer console (F12 on most browsers) -> right click on your element -> Inspect and in the CSS styles part look at the box model to find out if there is any additional padding/margins being applied

Answer 2

You can set your HTML talbe to be fixed width, then specify column widths:
<div class="easyui-panel" id="pp" style="margin-top:30px;width:100%">
<table class="uTbId" cellspacing="0" style=" table-layout:fixed;" >
<col width="5px" />
<col width="5px" />
<col width="5px" />
<col width="5px" />
<col width="5px" />
<tr>
<td style="background-color:#fafafa">stack</td>
<td style="background-color:#fafafa">john</td>
<td style="background-color:#fafafa">stock</td>
<td style="background-color:#fafafa">shansa</td>
</tr>
<tr>
<td style="background-color:#fafafa">Joy</td>
</tr>
</table>
</div>
https://jsfiddle.net/56Lc4o44/

Answer 3

When I use unified format, It works OK
The code is:
<style>
.uTbId tr td{width:100px;background-color:#fafafa}
.uTbId tr td:hover{background-color:#0000CD;color:green;}
</style>
<div class="easyui-panel" id="pp" style="margin-top:30px;width:100%">
<table class="uTbId" cellspacing="0" style="width:100%" >
<tr>
<td >stack</td>
<td >john</td>
<td >stock</td>
<td >shansa</td>
</tr>
<tr>
<td>Joy</td>
</tr>
</table>