Выровнять таблицу bootsrap 4.5 по центру
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" rel="stylesheet"/>
<div class="container emp-profile">
<form action="{{route('user_edit')}}" class="user_edit_form" method="POST">
<div class="row">
<div class="col-md-12">
<div class="profile-head">
<ul class="nav nav-tabs justify-content-center" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Info</a>
</li>
<li class="nav-item">
<a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">My orders</a>
</li>
</ul>
</div>
</div>
<div class="col-md-12">
<div class="tab-content profile-tab" id="myTabContent">
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
<table class="table table-borderless align-middle">
<tbody>
<tr>
<td><td>
<td scope="row"><a class="" href="#"><i class="fas fa-edit"></i><i class="fas fa-times"></i></a></td>
</tr>
<tr>
<th scope="row">Name</th>
<td class="userdata">Name</td>
<td class="useredit" style="display:none;"><input name="name" placeholder="name"><td>
</tr>
<tr>
<th scope="row">E-Mail</th>
<td class="userdata">E-Mail</td>
<td class="useredit" style="display:none;"><input name="E-MAIL" placeholder="E-Mail"><td>
</tr>
<tr>
<th scope="row">Phone</th>
<td class="userdata">5555555</td>
<td class="useredit" style="display:none;"><input name="phone" placeholder="phone"><td>
</tr>
<tr>
<td></td>
</tr>
</tbody>
</table>
</div>
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
<table class="table">
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Qty</th>
<th scope="col">Price</th>
</tr>
</thead>
<tbody>
@foreach($orders as $order)
@foreach($order->cart->items as $item)
<tr>
<th scope="row"><a href="/{{$item['code_cat']}}/{{$item['url_cat']}}/{{$item['prod_url']}}"><img class="basketimg mr-1" src="/img/products/{{$item['img']}}"><span class="basket-prod-name">{{$item['name']}}</span></a></th>
<td><div class="prodcount">{{$item['qty']}}</div></td>
<td>{{$item['cost']}}$</td>
</tr>
@endforeach
@endforeach
</tbody>
</table>
</div>
</div>
</div>
</div>
</form>
</div>
<script>
$(document).ready(function(){
$('.fas.fa-edit').click(function(e){
e.preventDefault();
$('.useredit, .fas.fa-times').show();
$('.fas.fa-edit, .userdata').hide();
});
$('.fas.fa-times').click(function(e){
e.preventDefault();
$('.useredit, .fas.fa-times').hide();
$('.fas.fa-edit, .userdata').show();
});
$("input[name=userimg]").change(function() {
$(".user_edit_form").submit();
});
});
</script>
Есть страница с двумя вкладками. На одной данные пользователя, на другой его заказы. Заказы, хоть не точно, но выровнялись по центру, а данные пользователя почему то слева. Там все через сетку бустрапа, поэтому пытался менять это значение, добавлять justify-content-center, кое как, но все равно криво выравнивалось. Есть идеи как по ставить идеально по центру? Да и еще чтобы вот эти белые края по бокам убирались?
Вкладка с информацией пользователя.
.
