Как сделать кнопку слева от таблицы выше в HTML?

У меня есть этот HTML-код, таблицы которого обернуты вокруг Div с начальной загрузкой. Первые 2 верхних таблицы завернуты в один ряд, а нижние завернуты в другой ряд. Как я могу сделать таблицу «Продано» выше, чтобы она выглядела немного лучше.

Код довольно длинный, поэтому я решил не вставлять его, но если он нужен, сообщите мне об этом ниже.

html css bootstrap-4

01.04.2022 09:57

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Problaly самый простой способ - не иметь две строки, а иметь все четыре таблицы внутри столбца, а затем все эти столбцы внутри одной строки. Используя col-6, вы можете быть уверены, что у вас по-прежнему будут две таблицы рядом друг с другом, а затем еще две ниже. Это выглядело бы примерно так...

<div class = "row">
  <div class = "col-6">
     Table 1 here
  </div>
   <div class = "col-6">
     Table 2 here
  </div>
  <div class = "col-6">
     Table 3 here
  </div>
  <div class = "col-6">
     Table 4 here
  </div>
</div>

01.04.2022 10:27

Ответ принят как подходящий

Для этого я бы не стал работать со строками, а взял бы контейнер и назначил ему два столбца (column-count: 2;). Тогда это должно работать.

#container {
  background-color: #aaa;
  margin: 0 auto;
  height: 500px;
  width: 500px;
  column-count: 2;
  gap: 10px;
  padding: 5px;
}

.box {  
  padding:10px;
  background-color: white;
  border: 1px solid black;
  width: 100%;  
  display: inline-block;
  box-sizing: border-box;
}

.box table {
  width: 100%;
}

<div id = "container">
  <div class = "box">
    <table border>
      <tr>
        <td>1</td>          
        <td>2</td>
      </tr>
      <tr>
        <td>3</td>          
        <td>4</td>
      </tr>      
    </table>
  </div>
  <div class = "box">
    <table border>
      <tr>
        <td>1</td>          
        <td>2</td>
      </tr>
      <tr>
        <td>3</td>          
        <td>4</td>
      </tr> 
      <tr>
        <td>5</td>          
        <td>6</td>
      </tr>       
    </table>     
  </div>
  <div class = "box">
    <table border>
      <tr>
        <td>1</td>          
        <td>2</td>
      </tr>
      <tr>
        <td>3</td>          
        <td>4</td>
      </tr> 
      <tr>
        <td>5</td>          
        <td>6</td>
      </tr>       
    </table>    
  </div>
  <div class = "box">
    <table border>
      <tr>
        <td>1</td>          
        <td>2</td>
      </tr>
      <tr>
        <td>3</td>          
        <td>4</td>
      </tr>      
    </table> 
    
  </div>
</div>

01.04.2022 11:12

Другие вопросы по теме

Выровнять флажок по центру

Есть ли способ визуально заполнить div элементами в HTML?

Добавить отдельное действие кнопки для панели сворачивания Bootstrap 3

Как сделать форму Talk Bubble в CSS?

Как выровнять содержимое в Bootstrap 5

Как заменить текст в css?

Почему медиа-запросы игнорируются при включенном сенсорном режиме?

Почему «взлом флажка» не работает с моим 3D-элементом?

Почему фокус не работает должным образом в раскрывающемся списке профилей?

(Javascript) Почему нужно нажимать несколько раз, чтобы кнопки работали?

Как сделать кнопку слева от таблицы выше в HTML?

Ответы 2

Другие вопросы по теме

Похожие вопросы