Как я могу правильно выровнять div с таблицей? - PullRequest
Новая
       0

Как я могу правильно выровнять div с таблицей?

0 голосов
/ 23 января 2020

У меня проблема CSS, которая действительно беспокоит меня. У меня есть контейнер с заголовком и выберите. У меня также есть таблица, и я хотел бы выровнять право выбора с моей таблицей.

Это то, что я хочу:

enter image description here

Я установил свой выбор как плавающий вправо, и он оказался в правом конце экрана, как и ожидалось. Проблема в том, что ширина моей таблицы не равна 100% экрана (и ширина может на самом деле изменяться).

Вот что я получаю:

enter image description here

Как сделать так, чтобы мой контейнер div с выбранным справа совпал с моим столом?

Это то, что я пробовал до сих пор: 

table,
th,
td {
  border-collapse: collapse;
  border: 1px solid black;
}

.mytable {
  clear: both;
}

.mysortdiv {
  float: right;
}
<div class="mysortdiv">
  <div>Sort</div>
  <select>
    <option value="1">First sort option</option>
    <option value="2">Second sort option</option>
  </select>
</div>
<table class="mytable">
  <thead>
    <tr>
      <th>My first column</th>
      <th>My second column</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Something 1</td>
      <td>Other thing 1</td>
    </tr>
    <tr>
      <td>Something 2</td>
      <td>Other thing 2</td>
    </tr>
  </tbody>
</table>

Ответы [ 6 ]

2 голосов
/ 23 января 2020

Вот возможное решение - 

<div class="container">
    <div class="mysortdiv">
  <div>Sort</div>
  <select>
    <option value="1">First sort option</option>
    <option value="2">Second sort option</option>
  </select>
</div>
<table class="mytable">
  <thead>
    <tr>
      <th>My first column</th>
      <th>My second column</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Something 1</td>
      <td>Other thing 1</td>
    </tr>
    <tr>
      <td>Something 2</td>
      <td>Other thing 2</td>
    </tr>
  </tbody>
</table>
</div>

table,
th,
td {
  border-collapse: collapse;
  border: 1px solid black;
}

.container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.mysortdiv {
    margin-bottom: 10px;
    margin-left: 110px;
}

Вот ручка - https://codepen.io/orby32/pen/XWJOEJg

Я удалил все поплавки и вместо этого обернул таблицу и выберите с container div, которые имеют display: flex;. Использование поплавков, рассматриваемых сегодня как наихудшая практика для выравнивания элементов.

2 голосов
/ 23 января 2020

Вы могли бы обернуть это в div? Затем установите каждый div чтобы плавать правильно!

1 голос
/ 23 января 2020

Лучший способ создать таблицу - это обернуть ее в div. Использование процентов для всех элементов сделает его мобильным. 

<div class="mysortdiv">
  <div>Sort</div>
  <select>
    <option value="1">First sort option</option>
    <option value="2">Second sort option</option>
  </select>
</div>
<div class="tbl">
  <table class="mytable">
    <thead>
    <tr>
      <th>My first column</th>
      <th>My second column</th>
    </tr>
    </thead>
    <tbody>
    <tr>
      <td>Something 1</td>
      <td>Other thing 1</td>
    </tr>
    <tr>
      <td>Something 2</td>
      <td>Other thing 2</td>
    </tr>
    </tbody>
  </table>
</div>

с этим css

table {
  width: 100%;
  border-spacing: 0;
  border-collapse: collapse;
}
thead, tbody, tr {
  width: inherit;
}
th, td {
  vertical-align: top;
  text-align: left;
  white-space: normal;
}
.mysortdiv {
  width: 50%;
  margin-left: 50%;
}
.tbl {
  width: 100%;
}
.mysortdiv *,
.tbl * {
  margin: 0;
  box-sizing: border-box;
}
.mysortdiv div,
.mysortdiv select {
  width: 100%;
  padding: 4px 6px;
  font-size: inherit;
}
.tbl table {
  border-top: 1px solid silver;
  border-left: 1px solid silver;
}
.tbl th,
.tbl td {
  width: 50%;
  padding: 4px 6px;
  border-right: 1px solid silver;
  border-bottom: 1px solid silver;
}
1 голос
/ 23 января 2020

Используйте CSS float:right; для вашего стола 

.mytable{float:right;}
<html>
<head>
    <style>
      table,th,td {border-collapse: collapse; border: 1px solid black;}
      .mytable {clear: both;}
      .mysortdiv {float:right;}
    </style>
</head>
<body>
    <div class="mysortdiv">
        <div>Sort</div>
        <select>
            <option value="1">First sort option</option>
            <option value="2">Second sort option</option>
        </select>
    </div><br><br><br>
    <table class="mytable">
        <thead>
            <tr>
                <th>My first column</th>
                <th>My second column</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Something 1</td>
                <td>Other thing 1</td>
            </tr>
            <tr>
                <td>Something 2</td>
                <td>Other thing 2</td>
            </tr>
        </tbody>
    </table>
</body>
0 голосов
/ 23 января 2020

Вы можете достичь этого, используя flexbox, не нужно использовать float

table,
th,
td {
  border-collapse: collapse;
  border: 1px solid black;
}

.mytable {
  clear: both;
}

.mysortdiv {
margin-bottom:10px;
}

.parent {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
<div class="parent">
  <div class="mysortdiv">
    <div>Sort</div>
    <select>
      <option value="1">First sort option</option>
      <option value="2">Second sort option</option>
    </select>
  </div>
  <table class="mytable">
    <thead>
      <tr>
        <th>My first column</th>
        <th>My second column</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Something 1</td>
        <td>Other thing 1</td>
      </tr>
      <tr>
        <td>Something 2</td>
        <td>Other thing 2</td>
      </tr>
    </tbody>
  </table>
</div>
0 голосов
/ 23 января 2020

Добавить align="right" в table

<table class="mytable" align="right">


table,
th,
td {
  border-collapse: collapse;
  border: 1px solid black;
}

.mytable {
  clear: both;
}

.mysortdiv {
  float: right;
}
<div class="mysortdiv">
  <div>Sort</div>
  <select>
    <option value="1">First sort option</option>
    <option value="2">Second sort option</option>
  </select>
</div>
<table class="mytable" align="right">
  <thead>
    <tr>
      <th>My first column</th>
      <th>My second column</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Something 1</td>
      <td>Other thing 1</td>
    </tr>
    <tr>
      <td>Something 2</td>
      <td>Other thing 2</td>
    </tr>
  </tbody>
</table>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...