table with td content at top and bottom - css

Question

In a (bootstrap-based) HTML page I have a table.
In a table cell, I'd like some content that is top-aligned, and some other content in the same cell that is bottom-aligned (there generally is enough vertical space). How can this be achieved? What I'd like to avoid is to work with fixed pixel spacing.
A MWE is here:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/jquery#3.3.1/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.14.0/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.3.1/dist/js/bootstrap.min.js"></script>
<div class="container">
<div class="container-fluid">
<div class="row">
<div class="col-12">
<table class="table table-striped table-dark">
<thead>
<tr>
<th scope="col">H1</th>
<th scope="col">H2</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div style="height: 100px; background-color: yellow"></div>
</td>
<td>
<div>top - aligned</div>
<div>
<button type="button" class="btn btn-primary btn-sm">Bottom-right</button>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>

Answer 1

Please check out this. Do you want something like this?
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/jquery#3.3.1/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.14.0/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.3.1/dist/js/bootstrap.min.js"></script>
<div class="container">
<div class="container-fluid">
<div class="row">
<div class="col-12">
<table class="table table-striped table-dark">
<thead>
<tr>
<th scope="col">H1</th>
<th scope="col">H2</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div style="height: 100px; background-color: yellow"></div>
</td>
<td>
<div class="">top - aligned</div>
<div class="mt-5">
<button type="button" class="btn btn-primary btn-sm">Bottom-right</button>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
Here I have added margin top to the button. class="mt-5"

Answer 2

You may add a column
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/jquery#3.3.1/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.14.0/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.3.1/dist/js/bootstrap.min.js"></script>
<div class="container">
<div class="container-fluid">
<div class="row">
<div class="col-12">
<table class="table table-striped table-dark">
<thead>
<tr>
<th scope="col">H1</th>
<th scope="col" colspan="2">H2</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div style="height: 100px; background-color: yellow" />
</td>
<td>
<div>top - aligned</div>
</td>
<td class="align-bottom text-right">
<div>
<button type="button" class="btn btn-primary btn-sm">Bottom-right</button>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
or use absolute position
.bottom-right {
bottom: 0;
right: 0;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/jquery#3.3.1/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.14.0/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.3.1/dist/js/bootstrap.min.js"></script>
<div class="container">
<div class="container-fluid">
<div class="row">
<div class="col-12">
<table class="table table-striped table-dark">
<thead>
<tr>
<th scope="col">H1</th>
<th scope="col">H2</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div style="height: 100px; background-color: yellow" />
</td>
<td class="position-relative">
<div>top - aligned</div>
<div>
<button type="button" class="btn btn-primary btn-sm position-absolute bottom-right m-1">Bottom-right</button>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
If it is only a visual layout matter, rethink the structure without a table , possible example:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<div class="container ">
<div class="container-fluid ">
<div class="row table-dark table-striped">
<div class="col-sm-6 p-0 border-bottom border-secondary">
<h2 class="px-3 border-bottom border-secondary">title 1</h2>
<div style="height: 100px;" class="m-3 bg-warning text-dark">100px</div>
</div>
<div class="col-sm-6 d-flex flex-column p-0 border-bottom border-secondary">
<h2 class="pr-3 border-bottom border-secondary m-0">title 2</h2>
<div class="pr-3">top - aligned</div>
<div class="text-right mt-auto p-3">
<div>
<button type="button" class="btn btn-primary btn-sm">Bottom-right</button>
</div>
</div>
</div>
<div class="col-sm-6 p-0 border-bottom border-secondary">
<div style="height: 150px;" class="m-3 bg-info ">150px</div>
</div>
<div class="col-sm-6 p-3 d-flex flex-column p-0 border-bottom border-secondary">
<div class="pr-3">top - aligned</div>
<div class="text-right mt-auto">
<div>
<button type="button" class="btn btn-primary btn-sm">Bottom-right</button>
</div>
</div>
</div>
</div>
</div>
</div>

Answer 3

It still would be nice to have a solution for a <table>, but I adopted the suggestion by #G-Cyrillus and used bootstrap classes to achieve this. If there is a better solution, please post, I will be happy to accept it.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" type="text/css" href="/static/css/bootstrap.min.css"/>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/jquery#3.3.1/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.14.0/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.3.1/dist/js/bootstrap.min.js"></script>
<title>Test</title>
</head>
<body>
<div class="container">
<div class="container-fluid" >
<div class="row">
<div class="col-6" style="background-color: grey">
<img src="x" height=100 />
</div>
<div class="col-6" style="background-color: yellow">
<div class="h-100 d-flex flex-column">
<div class="row">
content at top
</div>
<div class="row align-items-end justify-content-end flex-grow-1" style="background-color: orange">
<button type="button" class="btn btn-primary btn-sm">Bottom-right</button>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>