How do I align the div tags inside the td tag so that they are in a line
I'm trying to align the div tags inside the td, so that they are all inline. I've tried various methods such as using spans, and tinkered around with bootstrap classes but I still couldn't figure it out. Maybe the way I've set of the table is wrong?
<!DOCTYPE html>
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<style>
h4{
font-size: 2.5vw;
}
.container-fluid{
padding-top: 60px;
}
</style>
</head>
<body>
<nav class="navbar fixed-top navbar-expand-md navbar-light bg-light">
<a class="navbar-brand" href="#"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">
<span class="fas fa-home"></span>
Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><span class="fas fa-dollar-sign"></span></i>Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><span class="badge badge-secondary">5</span>Notifications</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="fas fa-user"></span>Account
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Profile</a>
<a class="dropdown-item" href="#">Settings</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Logout</a>
</div>
</li>
</ul>
</div>
</nav>
<div class="container-fluid">
<div class="row">
<div class="col-md-10 offset-md-1">
<table class="table table-striped table-bordered">
<thead>
<tr>
<th><h4 class="text-center">Free Plan</h4></th>
<th><h4 class="text-center">Standard Plan</h4></th>
<th><h4 class="text-center">Premium Plan</h4></th>
</tr>
</thead>
<tbody>
<tr>
<td><h3 class="text-center">$0</h3></td>
<td><h3 class="text-center">$19.99</h3></td>
<td><h3 class="text-center">$29.99</h3></td>
</tr>
<tr>
<td class="d-none d-md-block">
<div class="row">
<div class="col">Lorem ipsum</div>
<div class="col">Lorem ipsum</div>
<div class="col">Lorem ipsum</div>
</div>
</td>
<td class="d-none d-md-block">
<div class="row">
<div class="col">Lorem ipsum</div>
<div class="col">Lorem ipsum</div>
<div class="col">Lorem ipsum</div>
</div>
</td>
<td class="d-none d-md-block">
<div class="row">
<div class="col">Lorem ipsum</div>
<div class="col">Lorem ipsum</div>
<div class="col">Lorem ipsum</div>
</div>
</td>
</tr>
<tr>
<td><a href="#" class="btn btn-success btn-block">Purchase</a></td>
<td><a href="#" class="btn btn-info btn-block">Purchase</a></td>
<td><a href="#" class="btn btn-danger btn-block">Purchase</a></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<nav class="navbar fixed-bottom navbar-dark bg-dark">
<a class="navbar-brand" href="#">Sneh Patel</a>
</nav>
</body>
</html>
Here is a picture of the current result:
#jquery #html #bootstrap
1 Likes1.60 GEEK