Content in table rows at the top and bottom

I have a Bootstrap-based HTML page with a table, and I'm trying to achieve both top-aligned and bottom-aligned content within the same cell without using fixed pixel spacing. Is there a way to do this?

Here is a minimal working example:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="274d565242555e671409140916">[email protected]</a>/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="90e0ffe0e0f5e2befae3d0a1bea1a4bea0">[email protected]</a>/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="60020f0f14131412011020544e534e51">[email protected]</a>/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>

csslayouthtml-tablebootstrap-4

Answer №1

Take a look at this. Is this the kind of thing you're looking for?

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="610b101404131821524f524f50">[email protected]</a>/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="31415e414154431f5b4271001f00051f01">[email protected]</a>/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ccaea3a3b8bfb8beadbc8cf8e2ffe2fd">[email protected]</a>/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>

I've included some margin top to the button here. class="mt-5"

Answer №2

  • Consider adding an extra column 

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="9ff5eeeaeadcd4efdcb7cbbda8cadbdac2"><span class="__cf_email__" data-cfemail="b5dacf">[email protected]</span></a>/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e99986838897909687969495839eba8386888b89"><span class="__cf_email__" data-cfemail="07616e617461656074637472506f6766656462615e777a677a"><u>[email protected]</u></span></a>/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="54363b3b30360034373926262b26363425290939043835212a372000043635060607090bfadedfb"><u>[email protected]</u></span></a>/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>

  • Alternatively, you can opt for absolute positioning

.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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1a706b6f7f68676867554e56646c68696a64694a67030609">[email protected]</a>/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="48382738382d3a24222533353b243a652028232f64292a282e22265ec0303e35372556">[email protected]</a>/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2f4d40405b5c45456814404a572840152c53685346358c40375c">[email protected]</a>/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 the issue is purely visual, consider redesigning without using a table structure. Here's a 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

If only there was a solution available for using a <table>. However, I decided to follow the recommendation from @G-Cyrillus and utilized bootstrap classes instead. If anyone has a better alternative, please feel free to share, as I am open to accepting 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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="94fee5e1f1e6edd4a7baa7baa5">[email protected]</a>/dist/jquery.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="20504f505045520e4a5360110e11140e10">[email protected]</a>/dist/umd/popper.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d5b7babaa1a6a1a7b4a595e1fbe6fbe4">[email protected]</a>/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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Issues arise when attempting to center objects within the navbar-nav while in mobile view (collapsed)

After some tweaking with the CSS code provided below, I successfully centered the navbar-nav content within my navbar. Below is the CSS code used: /* @media (min-width:768px) { */ Note this comment .navbar > .container { text-align: center; } .na ...

cssdrop-down-menuformattingtwitter-bootstrap-3scrollbar

Jquery menu block shift

I am looking to implement a timer for the submenu within my menu. The idea is to show the submenu for 3 seconds after a mouse-over event. I have already set up a function to display and hide the submenu, but I am facing an issue where the submenu shifts to ...

jqueryhtmlcss

Is it possible to customize the Angular Kendo Grid to be non-scrollable and automatically adjust its height to fit the row contents?

I'm trying to create a Kendo Grid in Angular that is Non-Scrollable and adjusts its height to fit the row contents. However, my current implementation is not working as expected, as it still gives me a fixed height. <kendo-grid [data]="propertyVie ...

cssangularkendo-uitelerikangular8

Creating dynamic div elements with a button click in JavaScript / jQuery

Hey, do you know how to dynamically add a div when a button is clicked using JavaScript/jQuery? I want the added div to have the same formatting as the div with the class "listing listing_ad job". Here is the code I have tried using jQuery: $('#bt ...

javascriptjqueryhtmlcss

Adjust width when hovering or moving the mouse in and out

Apologies for the lack of a creative title... I'm sharing the following code snippet: .wrapper { display: flex; border: 1px solid red; padding: 10px; } .groups { display: flex; border: 2px solid blue; width: 70%; } .leftColumn { widt ...

jqueryhtmlcssangularjs

I prefer showcasing information using <h4> tags within a Bootstrap modal while deleting data

I need the location_name to be displayed as an <h4> rather than an <input> I attempted to include id and name attributes like this <h4 name="location_name" id="location_name">, but it didn't have any effect. My ...

htmljquerybootstrap-4

Display hidden divs using sliding effect in Javascript

Is there a way to incorporate a slide effect in order to reveal my hidden div? function toggleInfo() { var info = document.getElementById("info"); if (info.style.display === "none") { info.style.display = "block"; } else { ...

javascripthtmlcss

<FormattedMessage /> extract text from within tags

I'm struggling to articulate this issue clearly. Currently, I am utilizing a Bootstrap Table to showcase my data which includes search filters, sorting, and other functionality. As I began working on internationalization, I initially formatted direc ...

javascriptreactjsinternationalizationbootstrap-4react-intl

Adding a border-top overlay to vertical navigation

I'm working on a vertical navigation bar and I'd like to make some styling changes. Here's the current setup (View jFiddle): <style> ul{ list-style-type: none; } li{ display: block; margin: 0; padding: 10; border-top: 1px d ...

htmlcss

I'm curious why this heart ❤ emoji appears gray instead of red in VScode, when all the other emojis display correctly

Check out my awesome CodePen project where I'm struggling to change the heart emoji color! https://codepen.io/Touraf/pen/MWVoyzW This is where the emoji appears in the code- The Fundamentals of Web Development: HTML <img ...

htmlcssvisual-studio-codecolorsemoji

Emphasizing cells by their specific values

I have a basic website that displays a table showing user subscriptions. To update the data from my SQL server, I'm using jQuery/AJAX dynamically. I want to highlight the table when a user's subscription exceeds a certain threshold. For instan ...

jqueryhtml-tablehighlighting

Fuel Calculation - Unable to pinpoint the error

My JavaScript Code for Calculating CO2 Emissions I'm working on a program that calculates how much CO2 a person produces per kilometer. This is part of my school project and I'm still learning, so please bear with me... I also just signed up on ...

javascripthtmlbootstrap-4

When a div slides down on page load, the div will slide up when a button is clicked

I am trying to make a div slideDown on page load. The goal is to have the div automatically slideDown after 2 seconds, which contains a responsive image and a button named "z-indexed". However, I am having trouble getting the same div to slideUp when the z ...

jqueryhtmlcssslidedownslideup

Creating a dynamic layout with Bootstrap 4 featuring a full-page design, two columns, and a

For a simple "login" page, I came across this template: HTML: <div class="d-flex align-items-center flex-column justify-content-center h-100 bg-dark text-white" id="header"> <h1 class="display-4">Hello.</h1 ...

htmlcsstwitter-bootstrapbootstrap-4

The horizontal display list is experiencing issues when using the display inline property

I'm having trouble getting my list to display horizontally. I've tried using display: inline, as well as float: left; and position:center, but can't seem to get it centered properly. JavaScript Array.prototype.map.call(document.querySelect ...

htmlcsslisthtml-lists

Is there a way I can finish animating these divs in a diagonal motion?

I successfully made the blue and red divs move diagonally and switch positions. Now I am looking to achieve the same effect with the green and pink divs using a similar function. I am unsure about setting the position of both divs to 0 and 350 for those p ...

javascripthtmlcss

Animate.css plugin allows for owl-carousel to smoothly transition sliding from the left side to the right side

I have a question regarding the usage of two plugins on my website. The first plugin is Owl Carousel 2, and the second one is Animate.css. While using `animateIn: 'slideInLeft'` with Owl Carousel 2 is working fine, I am facing an issue with `ani ...

javascriptjqueryhtmlcssowl-carousel

Update the content of a div and refresh it when a key on the keyboard is pressed

I need to hide the images in a div when I press a key on the keyboard. How can I achieve this? <div> <span role="checkbox" aria-checked="true" tabindex="0"> <img src="checked.gif" role="presentation" alt="" /> ...

javascriptjqueryhtmlcss

Creating a wavy or zigzag border for the <nav id="top"> element in OpenCart version 2.3

I'm trying to achieve a wavy/zigzag border on the <nav id="top"> section in opencart v2.3 instead of a flat border. something similar to this example Below is the CSS code I am currently using: #top { background-color: #EEEEEE; borde ...

htmlcssopencartopencart2.3

Is it possible to include a div above a centered image?

Currently I am working with ImageFlow and I would like to overlay a div on top of the image when it is clicked, sliding it into the center. I have been looking through the JavaScript file but the function MoveIT() seems to be called multiple times and I am ...

javascriptjqueryhtmlcssimageflow