CSS como hacer una altura fija?

4 minutos de lectura

CSS como hacer una altura fija
david819

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

esto no funciona El desbordamiento sigue haciendo que la celda sea más alta, la altura se está adaptando al contenido.

  • @Šime Vidas sí. simplemente no lo pegué aquí

    – Dave819

    23 feb. 2011 a las 13:00


  • Haz un ejemplo en Papelera JSy asegúrese de que su ejemplo tenga el mismo problema que está describiendo en su pregunta.

    – treinta puntos

    23 feb. 11 a las 13:09

La mejor solución es poner un div dentro de la celda con la altura:

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

Por cierto, ¿para qué sirve el lapso? Si solo lo necesita para diseñar, puede diseñar la celda directamente en su lugar.

CSS como hacer una altura fija
cifrar

te faltan filas en la tabla


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

La propiedad CSS que está buscando es line-height. Simplemente tienes que ponerlo en el <td>, no en el contenido <span>

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

CSS como hacer una altura fija
enigma817

Estoy aprendiendo diseño web, así que soy un novato. Como también estaba enfrentando este problema y parte de la solución que no puedo entender en mi nivel. Mientras intentaba, descubrí que la altura de la celda se ajustaba automáticamente por el contenido de la <td> elemento. Así que lo que hice fue poner un <div> elemento dentro del <td> y fijó su altura. No importa cómo sea el contenido, la altura de la <td> se fija de alguna manera.

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

</div>
</td>


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

¿Ha intentado establecer la altura de css en el td en lugar del atributo html?

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

  • Si. no funciona la celda aún se hace más alta si hay mucho texto

    – Dave819

    23 feb. 11 a las 12:59

1641925412 760 CSS como hacer una altura fija
fernando cardoso

Yo tuve el mísmo problema. Puede usar el lapso directamente. Es el mejor enfoque. Los TD/TR no respetan la altura establecida. Simplemente coloque una clase en su intervalo y agregue el css o simplemente aplíquelo directamente con el atributo de estilo.

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

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

o solo

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

  • Si. no funciona la celda aún se hace más alta si hay mucho texto

    – Dave819

    23 feb. 11 a las 12:59

1641925412 527 CSS como hacer una altura fija
babu shinoy

Vaya con Div dentro del td y usando el css muestre los puntos para el desbordamiento

.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="https://stackoverflow.com/questions/5091179/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>

.

¿Ha sido útil esta solución?

Esta web utiliza cookies propias y de terceros para su correcto funcionamiento y para fines analíticos y para mostrarte publicidad relacionada con sus preferencias en base a un perfil elaborado a partir de tus hábitos de navegación. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos. Configurar y más información
Privacidad