table in div goes outside of container in responsive mode

Question

I have a table that is inside of a div. In responsive mode, the table goes outside of the div area and looks like this:

I am trying to have the table move to center in responsive mode. I want it to look like this:

Currently, when the screen width gets small, the table will not get close enough to the left to fit in the container. I do not want the table to go outside of the container.

Does anyone know how I can accomplish this?

.slice-table {
  vertical-align: middle;
  display: block;
  cursor: pointer;
  cursor: hand;
}
.inner {
  width: 50%;
  margin: 0 auto;
  font-size: 6px;
  color: #FFFFFF;
}
.spacer-20 {
  font-size: 0;
  height: 20px;
  line-height: 0;
}

Omar Yafer · Accepted Answer

How about adding

overflow-x: auto;

To the div.inner element. Altough I´m not sure if this is what you want. Your CSS would be something like

.inner {
  width: 50%;
  margin: 0 auto;
  font-size: 6px;
  color: #FFFFFF;
  overflow-x: auto; // When the table exceeds the size of the container, the container creates a scrollbar.
}

I took the liberty of adding a second cell for demostrations sake.

.slice-table {
  vertical-align: middle;
  display: block;
  cursor: pointer;
  cursor: hand;
}
.inner {
  width: 50%;
  margin: 0 auto;
  font-size: 6px;
  color: #FFFFFF;
  overflow-x: auto; 
}
.spacer-20 {
  font-size: 0;
  height: 20px;
  line-height: 0;
}

table in div goes outside of container in responsive mode

Answers (2)

Related Questions