html — Вертикальное заполнение таблицы
Подскажите пожалуйста, возможно ли заполнять html-таблицу вертикально, а не горизонтально?
В коде ячейки следуют:
<tr> <td>1 <td>2 <td>3 <tr> <td>4 <td>5 <td>6
а выводятся так:
|1|4|
|2|5|
|3|6|
- html
- css
- css3
- html5
1
Можно использовать flex, например:
tbody {
display:flex;
}
tr {
display:flex;
flex-direction: column;
flex-wrap: wrap;
}
td {
border: 1px solid red;
}<table>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
</tbody>
</table>0
можно попробовать использовать flex, например
.block { display: flex; flex-direction: column; flex-wrap: wrap; width: 50px; height: 100px; border: 1px solid red; } .block div { flex: 1 1 33%; }
block {
display: flex;
flex-direction: column;
flex-wrap: wrap;
width: 50px;
height: 100px;
border: 1px solid red;
}
.block div {
flex: 1 1 33%;
}<div class = 'block'>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>можно еще попробовать grid, например
.block {
display: grid;
grid-template-rows: 1fr 1fr 1fr;
grid-auto-flow: column;
width: 50px;
border: 1px solid red;
}
.block div {
border: 1px solid lime;
}<div class = 'block'>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div> Пользуйся таблицей сразу и не парься с grid и flex.
К тому же выполняя код все ответы у ребят получаются не того результата, что тебе требуется.
table {
padding: 3px;
border: 1px solid red;
border-radius: 3px;
}
td {
border: 1px solid black;
}<table>
<tr>
<td>1</td>
</tr>
<tr>
<td>2</td>
</tr>
<tr>
<td>3</td>
</tr>
<tr>
<td>4</td>
</tr>
<tr>
<td>5</td>
</tr>
<tr>
<td>6</td>
</tr>
</table>3
Зарегистрируйтесь или войдите
Регистрация через Google
Регистрация через Facebook
Регистрация через почту
Отправить без регистрации
Почта
Необходима, но никому не показывается
Отправить без регистрации
Почта
Необходима, но никому не показывается
Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки
Web-разработка • HTML и CSS
Для стилизации таблиц предназначены классы table, table-striped, table-bordered, table-hover, table-condensed.
Для выделения строки или ячейки таблицы можно использовать классы active, info, success, warning, danger. Для создания адаптивной таблицы предназначен класс table-responsive.
Простая таблица:
<table>
<thead>
<tr>
<th>№ п/п</th>
<th>Имя</th>
<th>Фамилия</th>
<th>E-mail</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Сергей</td>
<td>Иванов</td>
<td>[email protected]</td>
</tr>
<tr>
<td>2</td>
<td>Николай</td>
<td>Петров</td>
<td>[email protected]</td>
</tr>
<tr>
<td>3</td>
<td>Дмитрий</td>
<td>Сергеев</td>
<td>sergeev@mail. ru</td>
</tr>
</tbody>
</table>
Для выделения нечётных строк основной части таблицы:
<table>
..........
</table>
Добавить границы для всех ячеек таблицы:
<table>
..........
</table>
Подсвечивание строк при наведении курсора:
<table>
..........
</table>
Сделать таблицу более компактной:
<table>
..........
</table>
Выделить строку или ячейку цветом:
<table>
<thead>
<tr>
<th>№ п/п</th>
<th>Имя</th>
<th>Фамилия</th>
<th>E-mail</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Сергей</td>
<td>Иванов</td>
<td>ivanov@mail. ru</td>
</tr>
<tr>
<td>2</td>
<td>Николай</td>
<td>Петров</td>
<td>[email protected]</td>
</tr>
<tr>
<td>3</td>
<td>Дмитрий</td>
<td>Сергеев</td>
<td>[email protected]</td>
</tr>
</tbody>
</table>
ru</td>
</tr>
<tr>
<td>2</td>
<td>Николай</td>
<td>Петров</td>
<td>
Создание адаптивной таблицы:
<div>
<table>
..........
</table>
</div>Поиск: CSS • HTML • Web-разработка • Верстка • Форма • Таблица • Table • Bootstrap • Фреймворк
html — Как получить 3 таблицы рядом
спросил
Изменено 2 года, 11 месяцев назад
Просмотрено 27 тысяч раз
Я пытаюсь выровнять 3 таблицы рядом.
Это не работает, когда я помещаю таблицу в другую таблицу, потому что средняя таблица имеет много содержимого, что делает мою первую таблицу слишком большой по вертикали и выглядит неправильно.
То, что я пытаюсь сделать, это создать простую страницу, где у меня есть моя первая таблица с 3 строками вниз. Моя вторая таблица представляет собой всего лишь 1 столбец и 1 строку для содержимого, а моя 3-я таблица также состоит из 1 столбца и 1 строки. Мне нужно, чтобы эти таблицы были рядом.
Я искал в Интернете и не нашел никого, кто мог бы это сделать. Когда я добавляю таблицы, они складываются друг над другом. Может ли кто-нибудь помочь мне с тем, чтобы мои 3 стола были рядом?
<граница таблицы="1">
<граница таблицы="1">
<граница таблицы="1">
Если для этого требуется кодирование CSS, можете ли вы также предоставить его, это было бы очень признательно, я все еще изучаю продвинутый CSS и HTML.
- HTML
- CSS
- HTML-таблица
5
Добавить в каждую таблицу. например:
<граница таблицы = "1">
0
(расширенный) CSS:
таблица{
плыть налево;
}
1
Если вам приходится использовать таблицы (а вы делаете это для таких вещей, как электронная почта в формате HTML), вы сможете выполнять большинство задач с помощью вложенных таблиц. Вы пытались использовать одну таблицу-оболочку с тремя ячейками, а затем помещать свои три таблицы в одну из ячеек из таблицы-оболочки? Dreamweaver — действительно хороший инструмент для таблиц. Если это не табличные данные или электронное письмо в формате HTML, вам следует рассмотреть макет, не основанный на таблицах.
1
0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <голова>
Документ без названия <тело>
| Контент | Контент | Контент |
| Контент | Контент | Контент |
| Контент | Контент | Контент |
main {
ширина: 1800 пикселей; //в зависимости от того, какой ширины вы хотите окно таблицы
минимальная высота: 615 пикселей; //то же, что и ширина
поле: 0 авто; // чтобы центрировать содержимое на экране
дисплей: гибкий;
выравнивание содержимого: пробел между;
}
Я понятия не имею, как разделить его разными цветами, чтобы зеленый перекрывал другие и сохранял слова в каждой сетке.