Sean Marcus Sean Marcus - 1 month ago 7
CSS Question

td background stretches into tr even though height is applied

I have my td's set with a height on them, but on mobile devices such as my iPad and iPhone, the td background and border flows out of the td and into the tr. I recreated my exact code to show you what it NORMALLY looks like on my desktop, but as you can imagine there's probably a bug in my code which is allowing it to flow into the tr's

#tstyle2 {
width: 1000px;
border-top: 1px solid #e8e6e6;
border-bottom: 1px solid white;
}

#tstyle2 tr {
height: 160px;
border-bottom: none;
border-collapse: separate;
border-top: 1px solid white;
border-bottom: none;
width: 1000px;
}

#tstyle2 td {
border-top: none;
display: block;
height: 130px;
background-color: white;
border-left: 4px solid #bd6ec1;
box-shadow: 0px 3px 5px #b5b6b6;
}


http://jsfiddle.net/338cR/

Answer

I managed to find the solution:

I had to add

 display:block;

to the #tstyle2 tr {}

and then add

width: 1000px; 

to the #tstyle2 td {}

Comments