使用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

我没有看到为什么，您需要使用flexbox而不是表格。无论如何，仅出于不使用表格的目的，您都可以在此处使用CSS Grid布局-设置问题代码很容易。

也在此处使用display: contents-请注意，较新的浏览器支持它-完整的支持说明here。

.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>

Answer 2

在这里！

/* 
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>