我在 2 个包装 div 中有一个表格代码，外部带有 display: table ，内部带有 display:table-cell; vertical-align: middle，所以表格会显示在屏幕的中央。
但问题是，当我将窗口大小调整为小于 550 像素时，我的代码没有按预期显示。表格停止调整到该宽度以下。
当我删除 .page 和 .vcenter 包装器时，表格会按预期调整大小。
* {
-webkit-touch-callout: none;
/* iOS Safari */
-webkit-user-select: none;
/* Chrome/Safari/Opera */
-khtml-user-select: none;
/* Konqueror */
-moz-user-select: none;
/* Firefox */
-ms-user-select: none;
/* Internet Explorer/Edge */
user-select: none;
/* Non-prefixed version, currently
not supported by any browser */
}
/*************************************/
html,
body {
margin: 0;
width: 100%;
height: 100%;
}
.page {
display: table;
text-align: center;
width: 100%;
height: 100%;
}
.vcenter {
display: table-cell;
vertical-align: middle;
}
/*************************************/
table {
display: flex;
overflow: hidden;
}
thead {
display: flex;
flex-shrink: 0;
width: 30%;
}
tbody {
display: flex;
position: relative;
overflow-x: auto;
overflow-y: hidden;
width: 70%;
}
tr {
display: flex;
flex-direction: column;
flex-shrink: 0;
}
td,
th {
display: block;
}
td {
border-left: 0;
}
td,
th {
border: 1px solid;
}
th:not(:last-child),
td:not(:last-child) {
border-bottom: 0;
}
tr {
width: 100%;
}
th {
background-color: DarkSlateBlue;
text-weight: bold;
color: white;
}<div class="page">
<div class="vcenter">
<table>
<thead>
<tr>
<th> </th>
<th>Filipe</th>
<th>Crisp</th>
<th>Marco</th>
</tr>
</thead>
<tbody>
<tr>
<td>Fase 1</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Fase 2</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Fase 3</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Fase 4</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Fase 5</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Fase 6</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Fase 7</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Fase 8</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Fase 9</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Fase 10</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Fase 11</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Fase 12</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Fase 13</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Fase 14</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Fase 15</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>
</div>
</div>(点击“查看全页”并尝试将窗口大小调整到小于 550 像素，看看会发生什么)
这是怎么回事？
最佳答案
你需要使用table-layout: fixed
* {
-webkit-touch-callout: none;
/* iOS Safari */
-webkit-user-select: none;
/* Chrome/Safari/Opera */
-khtml-user-select: none;
/* Konqueror */
-moz-user-select: none;
/* Firefox */
-ms-user-select: none;
/* Internet Explorer/Edge */
user-select: none;
/* Non-prefixed version, currently
not supported by any browser */
}
/*************************************/
html,
body {
margin: 0;
width: 100%;
height: 100%;
}
.page {
display: table;
table-layout: fixed;
text-align: center;
width: 100%;
height: 100%;
}
.vcenter {
display: table-cell;
vertical-align: middle;
}
/*************************************/
table {
display: flex;
overflow: hidden;
}
thead {
display: flex;
flex-shrink: 0;
width: 30%;
}
tbody {
display: flex;
position: relative;
overflow-x: auto;
overflow-y: hidden;
width: 70%;
}
tr {
display: flex;
flex-direction: column;
flex-shrink: 0;
}
td,
th {
display: block;
}
td {
border-left: 0;
}
td,
th {
border: 1px solid;
}
th:not(:last-child),
td:not(:last-child) {
border-bottom: 0;
}
tr {
width: 100%;
}
th {
background-color: DarkSlateBlue;
text-weight: bold;
color: white;
}<div class="page">
<div class="vcenter">
<table>
<thead>
<tr>
<th> </th>
<th>Filipe</th>
<th>Crisp</th>
<th>Marco</th>
</tr>
</thead>
<tbody>
<tr>
<td>Fase 1</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Fase 2</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Fase 3</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Fase 4</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Fase 5</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Fase 6</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Fase 7</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Fase 8</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Fase 9</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Fase 10</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Fase 11</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Fase 12</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Fase 13</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Fase 14</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Fase 15</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>
</div>
</div>关于html - 为什么我的表格在小屏幕上占据了主体宽度的 100% 以上？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38332807/