Блог

Главная - Вопросы по программированию - Адаптивная таблица с помощью CSS

Адаптивная таблица с помощью CSS

#html #css

Вопрос:

Я хочу отобразить элемент ввода с кнопкой справа от него, чтобы ширина элемента ввода плюс небольшой зазор плюс ширина кнопки занимали всю ширину контейнера. Это пахнет как работа за столом.

Мои базовые CSS и HTML выглядят так:

 .css-table {
  display: table;
}

.css-tr {
  display: table-row;
}

.css-td {
  display: table-cell;
} 
 <div class='css-table'>
  <div class='css-tr'>
    <div class='css-td'>
      <input />
    </div>
    <div class='css-td'>
      <button>Do it</button>
    </div>
  </div>
</div>

Итак, какой стиль CSS я могу использовать, чтобы таблица была во всю ширину контейнера, с кнопкой, выровненной по правому краю контейнера, и элементом ввода, занимающим оставшееся пространство слева от кнопки (с небольшим зазором между правым краем элемента ввода и левым краем кнопки)?

Ответ №1:

Надеюсь, это сработает.

 .css-table {
    display: table;
    width: 100%;
}

.css-tr {
    display: table-row;
}

.css-td {
    display: table-cell;
}

.css-td input{
    width: 100%;
} 
 <div class='css-table'>
    <div class='css-tr'>
        <div class='css-td'>
            <input type="text"/>
        </div>
        <div class='css-td'>
            <button>Do it</button>
        </div>
    </div>
</div>

Комментарии:

1. Как вы получили магию «Запустить фрагмент кода», прикрепленную к вашему ответу?

2. @Bob.at.Индиго. Здоровье, если вы видите, что есть значок»<>», поэтому вам просто нужно нажать там и добавить CSS и HTML в соответствующие места и добавить. этого должно хватить.

3. О…. Я только что заметил, что в моем оригинальном посте волшебным образом появилась кнопка «Запустить фрагмент кода». По-видимому, у StackOverflow есть новый трюк… похоже, он может находить HTML и CSS в отмеченных блоках кода и соединять их вместе, чтобы их можно было «запускать».

4. Это было сделано не с помощью магии, я просто отредактировал ваш вопрос. Извините, что разочаровываю вас 😀 Вы можете увидеть это, если нажмете ссылку «отредактировано …» под своим сообщением.

Ответ №2:

Это только кажется, что работа за столом если вы все еще застряли в 1990 году. 😉 Если вам нужен современный, более современное решение, вы должны посмотреть в спецификации Flexbox для одномерных макетов. в CSS-уловок, которые имеют хорошее представление о спецификации Flexbox, но есть также тонны других ресурсов в интернете, чтобы вы начали.

Правка:
Увидел, что вам нужен небольшой зазор между правым краем элемента ввода и левым краем кнопки, добавил его во фрагмент.

 .css-row {
  display: flex;
}

.css-row input {
  flex-grow: 1;
  margin-right: 5px; /* to set the space for the button */
} 
 <div class='css-row'>
  <input />
  <button>Do it</button>
</div>

Комментарии:

1. В частности, спасибо за ссылку на обзор flexbox. Это действительно полезно! Думаю, пришло время оставить 90-е позади (но, боюсь, я застрял с новыми и улучшенными лохматыми волосами 2020 года).

Метки: