I am facing an issue with a bootstrap table that contains a form-inline in a specific column, which is causing the contents in other columns to not be vertically centered. (As shown in the 1st code snippet) How can I resolve this problem?
If I remove the form-inline from the table, all the content aligns properly. (As seen in the 2nd code snippet) Hence, it seems like the issue stems from having the form-inline within the table.
/* Adjust the width of the table cell based on content */
table th,
table td {
width: 1%;
white-space: nowrap;
}
.center-screen {
align-content: center;
justify-content: center;
align-items: center;
text-align: center;
margin: 0 auto;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet"><
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a4c6cbcbd0d7d0d6c5d4e4908a928a95">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous"><
</head>
<body>
<table class="table table-striped center-screen" style="max-width: 100%">
<thead>
<tr>
<th>Symbol><
<th style="width: 0.01%">Share><
<th>Action><
</tr>
</thead>
<tbody>
<tr>
<td>NVDA><
<td style="width: 0.01%">1><
<td>
<form class="form-inline justify-content-center">
<button type="submit" class="btn btn-danger" name="TSLA" value="Sell">
<i class="fas fa-minus-circle"></i>
</button>
<input type="number" name="quantity" class="form-control" value="1" min="1" max="100" style="width:70px">
<button type="submit" class="btn btn-primary" name="TSLA" value="Buy">
<i class="fas fa-plus-circle"></i>
</button>
</form>
</td>
</tr>
</table>
</body>
</html>/* Adjust the width of the table cell based on content */
table th,
table td {
width: 1%;
white-space: nowrap;
}
.center-screen {
align-content: center;
justify-content: center;
align-items: center;
text-align: center;
margin: 0 auto;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet"><
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1e7c71716a6d6a6c7f6e5e2a3028302f">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous"><
</head>
<body>
<table class="table table-striped center-screen" style="max-width: 100%">
<thead>
<tr>
<th>Symbol><
<th style="width: 0.01%">Share><
</tr>
</thead>
<tbody>
<tr>
<td>NVDA><
<td style="width: 0.01%">1><
</tr>
</table>
</body>
</html>