Question

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

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

Answer 1

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

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

顺便说一句，什么是跨度？如果您只需要它来进行样式设置，则可以直接设置单元格样式。

Answer 2

你缺少表格行

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

Answer 3

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

中

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

Answer 4

我有同样的问题。您可以直接使用跨度。这是最好的方法。 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>

Answer 5

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

Answer 6

使用

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

并调整＆＃34; 1pt＆＃34;所需高度的值（顶部和底部）。

出于某种原因

padding 0;

不起作用。

Answer 7

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

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

</div>
</td>


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

Answer 8

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

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

Answer 9

我会写的

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

CSS如何制作固定高度？

9 个答案: