таблица с содержанием тд сверху и снизу - PullRequest
Новая
       6

таблица с содержанием тд сверху и снизу

0 голосов
/ 03 марта 2020

На странице (bootstrap) HTML у меня есть таблица.

В ячейке таблицы я бы хотел, чтобы какой-то контент был выровнен по верху, а другой контент в та же самая ячейка, которая выровнена снизу (там обычно достаточно вертикального пространства). Как этого достичь? Чего я хотел бы избежать, так это работать с фиксированным расстоянием между пикселями.

MWE здесь: 

<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>

Ответы [ 3 ]

0 голосов
/ 03 марта 2020
  • Вы можете добавить столбец 

<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>
  • или используйте абсолютную позицию 

.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>
  • Если речь идет только о визуальном расположении, переосмыслите структуру без таблицы, возможный пример: 

<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>
0 голосов
/ 04 марта 2020

Было бы неплохо найти решение для <table>, но я принял предложение @ G-Cyrillus и использовал bootstrap классы для достижения этой цели. Если есть лучшее решение, пожалуйста, напишите, я буду рад принять его. 

<!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>
0 голосов
/ 03 марта 2020

Пожалуйста, проверьте это. Вы хотите что-то подобное? 

<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>

Здесь я добавил поле сверху для кнопки. класс = "МТ-5"

...