CODEWITHSUNDEEP
csshtml-table
Erik James Robles
Erik James Robles

Reputation: 899

first column of table jumping out of overflow-y:auto;

I have verticle and horizontal scroll on my table but when I get to mobile sizes, the data begins to squish and my first column jumps out of the div and I have no idea why. Here is my css:

table, th, td {
    width: 100%;
    border-collapse: collapse;
}

.table {
  width: 100%;
  height: 350px;
  overflow-x: scroll;
  overflow-y: scroll;
}

Any help would be appreciated. The site I am working on is https://probeis.mx/deteccion and here is a screenshot showing the problem: enter image description here

Upvotes: 0

Views: 88

Answers (2)

Karuppiah RK
Karuppiah RK

Reputation: 3964

In mobile resolution (under 700px cases) you have set position:absolute; in .table-rank tr td:first-child. That causes the breakage.

You have to remove that position:absolute and also no need to set top.

@media (max-width: 700px)
.table-rank tr td:first-child {
    width: 160px;
    position: initial;
    height: 60px;
}

Upvotes: 1

Ranjith v
Ranjith v

Reputation: 1062

try this

css

@media only screen and(max-width: 700px){
   position: static;
}

Upvotes: 0

Related Questions