Filipe Teixeira Filipe Teixeira - 4 months ago 9
CSS Question

Why is my table occupying more than 100% width of the body on small screen?

I have this code of a table inside 2 wrapping divs, the external with

display: table
and the inner with
display:table-cell; vertical-align: middle
, so the table will display on the center of the screen.

But the problem is that my code is not displaying as expected when I resize the window to less than 550px. The table stop resizing below that width.

When I remove the
.page
and
.vcenter
wrappers, the table resizes as expected.



* {
-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>&nbsp;</th>
<th>Filipe</th>
<th>Crisp</th>
<th>Marco</th>
</tr>
</thead>
<tbody>
<tr>
<td>Fase 1</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>Fase 2</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>Fase 3</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>Fase 4</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>Fase 5</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>Fase 6</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>Fase 7</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>Fase 8</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>Fase 9</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>Fase 10</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>Fase 11</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>Fase 12</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>Fase 13</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>Fase 14</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>Fase 15</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</tbody>
</table>

</div>
</div>





(Click on "view full page" and try resizing the window to less than 550px to see what happens)

What is going on?

Answer

you need to use 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>&nbsp;</th>
          <th>Filipe</th>
          <th>Crisp</th>
          <th>Marco</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Fase 1</td>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
        </tr>
        <tr>
          <td>Fase 2</td>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
        </tr>
        <tr>
          <td>Fase 3</td>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
        </tr>
        <tr>
          <td>Fase 4</td>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
        </tr>
        <tr>
          <td>Fase 5</td>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
        </tr>
        <tr>
          <td>Fase 6</td>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
        </tr>
        <tr>
          <td>Fase 7</td>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
        </tr>
        <tr>
          <td>Fase 8</td>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
        </tr>
        <tr>
          <td>Fase 9</td>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
        </tr>
        <tr>
          <td>Fase 10</td>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
        </tr>
        <tr>
          <td>Fase 11</td>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
        </tr>
        <tr>
          <td>Fase 12</td>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
        </tr>
        <tr>
          <td>Fase 13</td>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
        </tr>
        <tr>
          <td>Fase 14</td>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
        </tr>
        <tr>
          <td>Fase 15</td>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
        </tr>
      </tbody>
    </table>

  </div>
</div>