I have a table in which I move the rows using the draggable function of JqueryUI.
The size in width is set with percentages for each cell, but when performing the drag and drop these percentages are altered, in addition you can 'take' the row 'out' of the table.
To give you an idea, the table looks like this if nothing is done.
But when you move the row you can see it like this:
The code of the view is as follows:
<div class="col-md-12">
<div id="tableemployees">
<table class="table">
<thead>
<tr class="tremployee">
<th class="columnidemployee thcenter thmenuemp">ID</th>
<th class="thcenter thmenuemp columnvisibleemp" >Visible</th>
<th class="thmenuemp thmenuempname">Nombre</th>
<th class="thmenuemp">#Hashtag</th>
<th class="thmenuemp">Slug</th>
<th class="thmenuemp">Puesto</th>
<th class="thmenuemp thmenuimagen">Imagen</th>
<th class="thcenter thmenuemp thmenuorden">Orden</th>
<th class="thaccionesemployee thmenuemp"><span class="glyphicon glyphicon-cog"></span>Acciones</th>
</tr>
</thead>
<tbody id="tbodyemployee">
@foreach ($employees as $key => $employee)
<tr id="{{$employee->id}}">
<td class="idemployees tdcenter"><p id="margindataemployee">{{$employee->id}}</p></td>
<td class="visibleemployee tdcenter">
<form action="{{route('admin.employees.cambiarVisible',$employee->id)}}" >
<button type="button" id="buttonchangepublicemployee" data-id="{{ $employee->id }}" class="buttonchangepublicemployee">
@if ($employee->public == '1')
<i class="fa fa-check" aria-hidden="true" id="margindataemployee" class="cambiarsiporno"></i>
@else
<i class="fa fa-times" aria-hidden="true" id="margindataemployee"></i>
@endif
</button>
<input type="hidden" name="_token" value="{{Session::token()}}">
</form>
</td>
<td class="nameemployee"><p id="margindataemployee">{{$employee->name}}</p></td>
<td class="nameemployee2"><p id="margindataemployee">{{$employee->name}}</p><img src="{{ asset('/storage/employees/'.$employee->slug.'.jpg')}}" class="sizeimage"></td>
<td class="hashtagemp"><p id="margindataemployee">#{{$employee->hashtag}}</p></td>
<td class="hashtagemp2"><p id="margindataemployee" class="hashtagempp">#{{$employee->hashtag}}</p>
@if ($employee->public == '1')
<p class="pvisible">Visible:</p><i class="fa fa-check" aria-hidden="true" id="margindata"></i>
@else
<p class="pvisible">Visible:</p><i class="fa fa-times" aria-hidden="true" id="margindata"></i>
@endif
</td>
<td class="slugemployee"><p id="margindataemployee" class="slugemp">{{$employee->slug}}</p></td>
<td class="slugemployee2"><p id="margindataemployee">{{$employee->slug}}</p>
<form method="POST" action="{{route('admin.employees.destroy',$employee->id)}}" onsubmit="return ConfirmarBorrarTrabajadores()" class="formeditdeletemenuemployee4">
<input type="submit" value="Delete" class="btn btn-danger btn-danger-emp btn-sm" id="margindataemployee">
<input type="hidden" name="_token" value="{{Session::token()}}">
{{method_field('DELETE')}}
</form>
</td>
<td class="puestoemployee"><p id="margindataemployee">{{$employee->position}}</p></td>
<td class="imagenemployee"><img src="{{ asset('/storage/employees/'.$employee->slug.'.jpg')}}" class="sizeimage"></td>
<td class="ordenemployee tdcenter"><p id="margindataemployee">{{$employee->order}}</p>
<div class="formeditdeletemenuemployee">
<a href="{{ route('admin.employees.edit', $employee->id)}}" class="btn btn-success btn-success-emp btn-sm" id="margindataemployee">Editar</a>
<button type="button" class="btn btn-danger btn-sm deletemenuemployee" data-toggle="modal" data-target="#formdeleteemployee_{{$employee->id}}" id="margindata">Borrar</button>
</div>
</td>
<td class="formactionmenuemployee">
<a href="{{ route('admin.employees.edit', $employee->id)}}" class="btn btn-success btn-success-emp btn-sm" id="margindataemployee">Editar</a>
<button type="button" class="btn btn-danger btn-sm deletemenuemployee" data-toggle="modal" data-target="#formdeleteemployee_{{$employee->id}}" id="margindata">Borrar</button>
</td>
<div id="formdeleteemployee_{{$employee->id}}" class="modal fade" role="dialog"> <!-- DIV TO SHOW THE CREATE PROJECT FORM 1 START HERE-->
<div class="modal-dialog" style="background-color:#23517F;">
<div class="modal-content" style="background-color:#23517F;">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title" style="color:black;">¿Estas seguro de borrar el trabajador?</h4>
</div>
<div class="modal-body">
<div class="col-sm-6">
<a href="{{ route('admin.employees') }}" class="btn btn-danger btn-block colsm6btnno">No</a>
</div>
<div class="col-sm-6">
<form method="POST" action="{{route('admin.employees.destroy',$employee->id)}}">
<input type="submit" value="Si" class="btn btn-danger btn-block colsm6btnsi inputsiemployee">
<input type="hidden" name="_token" value="{{Session::token()}}">
{{method_field('DELETE')}}
</form>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal" id="closemodal">Close</button>
</div>
</div>
</div>
</div>
</tr>
@endforeach
</tbody>
</table>
<br><br>
</div>
</div>
I know that as a general rule, you should not put a <div> element within a <td> element, but that is not the cause of the styles problem.
I do not know if you can help, the <tr> has style display:table-row but when I do the drag, it happens to have display:none;
Can you think of what I can do with the styles, to solve the problem?
