CSS how to make <TD> a fixed height?_问答_开发者

开发者 https://www.devze.com 2023-02-13 02:46 出处：网络

<tablecellspacing=\"0\" id=\"contactTable\" style=\"table-layout:table-layout:fixed;; width:100%; font-weight:normal; position: absolute; top:45; left: 0;\">

相关专题：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>

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