Создать адаптивную таблицу с помощью flexbox

Question

Как мне создать адаптивную таблицу?

Таблица, которую я хочу, похожа на эту:

Таблица должна быть адаптивной, поэтому необходимо изменить ширину столбцов.

Я думаю, что лучшее решение - это использовать Flexbox, но как?

Я пытаюсь этот код:

.container {
  display: flex;
  border: 1px solid black;
}

.column {
  display: flex;
  flex-direction: column;
  border: 1px solid black;
}

.cell {
  border: 1px solid black;
  padding: 5px;
}

<div class="container">
  <div class="column">
    <div class="cell"></div> <!-- empty cell -->
    <div class="cell">something</div>
    <div class="cell">dog</div>
    <div class="cell">more dogs</div>
  </div>

  <div class="column">
    <div class="cell">column2 long title</div>
    <div class="cell">abc</div>
    <div class="cell">a</div>
    <div class="cell">aaaaaaa</div>
  </div>

  <div class="column">
    <div class="cell">column 3 tilew</div>
    <div class="cell">bbbb</div>
    <div class="cell">da</div>
    <div class="cell">f</div>
  </div>

  <div class="column">
    <div class="cell">something</div>
    <div class="cell">ggggg</div>
    <div class="cell">f</div>
    <div class="cell">cats</div>
  </div>
</div>

Я просто создаю 4 столбца, и каждый столбец имеет одинаковое количество строк, но, конечно, они не будут иметь одинаковую высоту. Как я могу это исправить?

Тогда первая ячейка должна быть пустой

Большое спасибо!

Answer 1

Вот оно!

/* 
Generic Styling, for Desktops/Laptops 
*/
table { 
  width: 100%; 
  border-collapse: collapse; 
}
/* Zebra striping */
tr:nth-of-type(odd) { 
  background: #eee; 
}
th { 
  background: #333; 
  color: white; 
  font-weight: bold; 
}
td, th { 
  padding: 6px; 
  border: 1px solid #ccc; 
  text-align: left; 
}



/* 
Max width before this PARTICULAR table gets nasty
This query will take effect for any screen smaller than 760px
and also iPads specifically.
*/
@media 
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px)  {

	.responsive-table-input-matrix {
		display: block;
		position: relative;
		width: 100%;

		&:after {
			clear: both;
			content: '';
			display: block;
			font-size: 0;
			height: 0;
			visibility: hidden;
		}

		tbody {
			display: block;
			overflow-x: auto;
			position: relative;
			white-space: nowrap;
			width: auto;


			tr {
				display: inline-block;
				vertical-align: top;

				td {
					display: block;
					text-align: center;

					&:first-child {
						text-align: left;
					}
				}
			}
		}

		thead {
			display: block;
			float: left;
			margin-right: 10px;

			&:after {
				clear: both;
				content: "";
				display: block;
				font-size: 0;
				height: 0;
				visibility: hidden;
			}

			th:first-of-type {
				height: 1.4em;
			}

			th {
				display: block;
				text-align: right;

				&:first-child {
					text-align: right;
				}
			}
		}
	}
}

<table class="responsive-table-input-matrix">
		<thead>
		<tr>
			<th></th>
			<th>Owner</th>
			<th>Group</th>
			<th>Others</th>
			<th>Administrators</th>
			<th>Managers</th>
			<th>Engineers</th>
			<th>Sales</th>
			<th>Employees</th>
			<th>Customers</th>
			<th>Community</th>
		</tr>
		</thead>
		<tbody>

		<tr>
			<td>Add</td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
		</tr>
		<tr>
			<td>Edit</td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
		</tr>
		<tr>
		<td>Delete</td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
		</tr>
		<tr>
			<td>Rename</td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
		</tr>
		<tr>
			<td>Move</td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
		</tr>
		</tbody>
	</table>

Answer 2

Я не вижу , почему вам нужно использовать flexbox, а не таблицу. В любом случае, вы можете использовать CSS Grid здесь только ради , а не с использованием таблиц - это легко настроить для кода в вопросе.

Также здесь используется display: contents - обратите внимание, что оно поддерживается в новых браузерах - полное объяснение поддержки здесь .

.container {
  display: grid; /* grid containers */
  grid-template-columns: repeat(4, 1fr); /* four columns */
  grid-template-rows: repeat(4, 1fr); /* four rows */
  grid-auto-flow: column; /* in column direction */
  border: 1px solid black;
}

.column {
  display: contents; /* the child elements would be grid items */
  border: 1px solid black;
}

.cell {
  border: 1px solid black;
  padding: 5px;
}

<div class="container">
  <div class="column">
    <div class="cell"></div> <!-- empty cell -->
    <div class="cell">something</div>
    <div class="cell">dog</div>
    <div class="cell">more dogs</div>
  </div>

  <div class="column">
    <div class="cell">column2 long title</div>
    <div class="cell">abc</div>
    <div class="cell">a</div>
    <div class="cell">aaaaaaa</div>
  </div>

  <div class="column">
    <div class="cell">column 3 tilew</div>
    <div class="cell">bbbb</div>
    <div class="cell">da</div>
    <div class="cell">f</div>
  </div>

  <div class="column">
    <div class="cell">something</div>
    <div class="cell">ggggg</div>
    <div class="cell">f</div>
    <div class="cell">cats</div>
  </div>
</div>