CSS how to make a fixed height?

Answer 1

The best solution is to put a div inside the cell with the height:

<td style="padding-left:5px;">
  <div style="height: 50px; overflow:hidden;">
      ...
  </div>
</td>

BTW, what is the span for? If you only need it for styling, you can style the cell directly instead.

Answer 2

Use

.yourClass {padding: 1pt 0 1pt 0;}

and adjust the "1pt" values (top & bottom) for the required height.

For some reason

padding 0;

doesn't work.

Answer 3

The CSS property you are looking for is line-height. You simply have to put it in the <td>, not in the contained <span>

<td style="padding-left:5px; line-height: 50px; overflow: hidden">
</td>

Answer 4

Have you tried setting the css height on the td rather than the html attribute?

<td style="padding-left:5px; height:50px; overflow:hidden; ">
    <span style="text-transform:capitalize;line-height:100%;">    //names here
    </span>                              

Answer 5

I had this same problem. You can use the span directly. It's the best approach. The TD/TR dont respect the height set. Just put a class on your span and add the css or just aply it directly with the style atribute.

<span class"MyClass">LONG NAME</span>

.MyClass { //on CSS File
    height: 60px;
    overflow:hidden;
}

or just

<span style="height: 60px; overflow:hidden;">LONG NAME</span>

Answer 6

I am just learning web designing so am I kind of a noob. As I was also facing this problem and some of the solution I can't understand at my level. While I was trying I found that the height of the cell auto adjusted by the content of the <td> element. So what I did was I put a <div> element inside the <td> and fixed it's height. No no matter how the content is, the height of the <td> is fixed in a way.

<td class="center">
<div class="align">
.
.
.

</div>
</td>


.align{  height: 200px;
     overflow:scroll;
     width:600px;
}