CSS how to make <TD> a fixed height?
<table cellspacing="0" id="contactTable" style="table-layout:table-layout:fixed;; width:100%; font-weight:normal; position: absolute; top:45; left: 0;">
<td height="50" style="padding-left:5px; overflow:hidden; ">
<span style="text-transform:capitalize;line-height:100%;">
//names 开发者_如何学编程here
</span>
</td>
...more code
</table>
This doesn't work. Overflow is still making the cell taller, height is addapting to content.
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.
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>
you're missing table rows
<table cellspacing="0" id="contactTable" style="table-layout:fixed; width:100%; font-weight:normal; position: absolute; top:45; left: 0;">
<tr>
<td style="padding-left:5px; overflow:hidden; height: 50px;">
<span style="text-transform:capitalize;line-height:100%;">
//names here
</span>
</td>
</tr>
</table>
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;
}
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>
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>
Go with Div inside the td and using the css show the dots for overflow
.box {
width: 200px;
}
.clampMe {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
.clampMe:after {
display: none;
}<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<table border="1">
<tr>
<td>test</td>
<td>test</td>
</tr>
<tr>
<td>test</td>
<td>test</td>
</tr>
<tr>
<td class="box">
<div class="clampMe">
FASTag is a simple to use, reloadable tag which enables automatic deduction of toll charges and lets you pass through the toll plaza without stopping for the cash transaction. FASTag is linked to a prepaid account from which the applicable toll amount
is deducted. The tag employs Radio-frequency Identification (RFID) technology and is affixed on the vehicle's windscreen after the tag account is active.
</div>
</td>
<td>
<div>testasdfasdfasd asdf asdf asdfas dffasdf asd</div>
</td>
</tr>
</table>
</body>
</html>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.
I would have written
<td style="height:50px">
...
</td>
加载中,请稍侯......
精彩评论