Html CSS如何使<TD>固定高度？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5091179/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS how to make <TD> a fixed height?
提问by Dave819
<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.
这不起作用。溢出仍然使单元格更高，高度正在适应内容。
回答by RoToRa
The best solution is to put a div inside the cell with the height:
最好的解决方案是在单元格内放置一个具有高度的 div：
<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.
顺便说一句，跨度是什么？如果您只需要它来设置样式，则可以直接为单元格设置样式。
回答by cypher
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>
回答by SteeveDroz
The CSS property you are looking for is line-height. You simply have to put it in the <td>, not in the contained <span>
您正在寻找的 CSS 属性是line-height. 你只需要把它放在<td>，而不是放在包含的<span>
<td style="padding-left:5px; line-height: 50px; overflow: hidden">
</td>
回答by enigma817
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>元素的内容自动调整。所以我所做的是我<div>在里面放了一个元素<td>并固定了它的高度。无论内容如何，其高度<td>在某种程度上都是固定的。
<td class="center">
<div class="align">
.
.
.
</div>
</td>
.align{ height: 200px;
overflow:scroll;
width:600px;
}
回答by Fernando Cardoso
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.
我有同样的问题。您可以直接使用跨度。这是最好的方法。TD/TR 不尊重高度设置。只需在您的跨度上放置一个类并添加 css 或直接使用样式属性应用它。
<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>
回答by Shinoy Babu
Go with Div inside the td and using the css show the dots for overflow
在 td 中使用 Div 并使用 css 显示溢出点
.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>回答by Guy Ollerearnshaw
Use
用
.yourClass {padding: 1pt 0 1pt 0;}
and adjust the "1pt" values (top & bottom) for the required height.
并调整所需高度的“1pt”值（顶部和底部）。
For some reason
因为某些原因
padding 0;
doesn't work.
不起作用。
回答by Lee Atkinson
Have you tried setting the css height on the td rather than the html attribute?
您是否尝试过在 td 而不是 html 属性上设置 css 高度？
<td style="padding-left:5px; height:50px; overflow:hidden; ">
<span style="text-transform:capitalize;line-height:100%;"> //names here
</span>
回答by Nans
I would have written
我会写
<td style="height:50px">
...
</td>
