JQuery移动表在纵向视图中未完全对齐

Question

具有动态值的表格在横向上完美对齐，但在纵向中无法完美查看，因为相应的最后一列显示在移动设备的显示之外。

   <table id="dataTable" cellspacing="0"  width="100%" cellpadding="0"
                        align="center">
       <thead>
  <tr>

<th width="25%">Name</th>
<th width="25%">Relationship</th>
<th width="25%">HomePhone</th>
<th width="25%">Email</th>

                            </tr>
                        </thead>
                        <tbody>

                            <tr>
  <?php $loop=1;    foreach($this->userobjArray as $temp){   ?>


                                <td align="center"  class="name"><?php echo $temp->name;?></td>
                                <td align="center" class="relation"><?php echo $temp->relation;?></td>
                                <td align="center" class="homephone"><?php echo $temp->homephone;?></td>
                                <td align="center" class="email"><?php echo $temp->email?></td>
                                <td align="center" class="id" style="display: none;"><?php echo $temp->id; ?></td>
                        </tr>

                                 <?php $loop++;  } ?> </tbody> </table>