0

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>
Barthy
  • 3,151
  • 1
  • 25
  • 42
user52366
  • 1,035
  • 1
  • 10
  • 21
  • If you use a table, then you could add a column. But what have you tried so far that failed ? – G-Cyrillus Mar 03 '20 at 16:30
  • I tried to adopt some of the flexbox examples, but these did not work in the table context (e.g. https://stackoverflow.com/questions/585945/how-to-align-content-of-a-div-to-the-bottom). – user52366 Mar 03 '20 at 19:57
  • if you want your td to turn into a flex box but also stretch with its sibling, tr needs to a be a flex box too. – G-Cyrillus Mar 04 '20 at 09:07

3 Answers3

0

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"

G-Cyrillus
  • 101,410
  • 14
  • 105
  • 129
krishna
  • 1,029
  • 6
  • 12
  • The spacing now is hard-coded, but the idea would be that the space in the middle is "flexible", i.e. it grows when required, starting from a minimum size of zero. – user52366 Mar 03 '20 at 18:25
0
  • 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>
G-Cyrillus
  • 101,410
  • 14
  • 105
  • 129
  • That is not the idea, the two parts should be in the same TD, not side by side. – user52366 Mar 03 '20 at 18:23
  • @user52366 then use the position option, if both are not what you want, clarify the question with what you tried and do not want to use. In the end , a compromise might have to be done. A bad question gives bad, if not any, answers. – G-Cyrillus Mar 03 '20 at 19:33
  • I'd like to place some content at the top and some other content at the bottom of the *same* table cell, with empty space in between that stretches at the height of the table row grows. Isn't that clear? – user52366 Mar 03 '20 at 19:59
  • @user52366 it's clear , but this is a table cell, not a flex or grid element .vertical-alignement in a table-cell takes only one value and for the all content at once. If none of the proposition are fine .today the other option is to reset diplay to trs and tds so it can become a flex or grid layout, not a table-layout anymore. This is a redundant question to me and you got the redundant working answers. Also , if this a table for a design-layout purpose, you should drop it and use display:flex or display:grid. – G-Cyrillus Mar 04 '20 at 09:03
0

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>
user52366
  • 1,035
  • 1
  • 10
  • 21