CSS如何制作固定高度?

时间:2011-02-23 12:53:01

标签: html css

<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>

这不起作用。溢出仍然使细胞更高,高度增加内容。

9 个答案:

答案 0 :(得分:37)

最好的解决方案是将div放在具有高度的单元格内:

<td style="padding-left:5px;">
  <div style="height: 50px; overflow:hidden;">
      ...
  </div>
</td>
顺便说一句,什么是跨度?如果您只需要它来进行样式设置,则可以直接设置单元格样式。

答案 1 :(得分:1)

你缺少表格行


<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>

答案 2 :(得分:1)

您要查找的CSS属性为line-height。您只需将其放在<td>中,而不是放在包含的<span>

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

答案 3 :(得分:0)

我有同样的问题。您可以直接使用跨度。这是最好的方法。 TD / TR不尊重高度设定。 只需在你的跨度上放一个类并添加css或直接使用样式属性。

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

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

或只是

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

答案 4 :(得分:0)

在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>

答案 5 :(得分:0)

使用

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

并调整&#34; 1pt&#34;所需高度的值(顶部和底部)。

出于某种原因

padding 0;

不起作用。

答案 6 :(得分:0)

我只是在学习网页设计,所以我有点菜鸟。因为我也面临着这个问题和一些我无法理解的解决方案。在尝试时,我发现单元格的高度由<td>元素的内容自动调整。因此,我要做的是将<div>元素放入<td>内并固定其高度。无论内容如何,​​<td>的高度都是固定的。

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

</div>
</td>


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

答案 7 :(得分:-1)

您是否尝试在td而不是html属性上设置css高度?

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

答案 8 :(得分:-5)

我会写的

<td style="height:50px">
...
</td>