html - tabla - desbordamiento: desplazamiento; en<td>

inmovilizar filas y columnas tabla html jquery

Question

¿Por qué se overflow:scroll; propiedad CSS overflow:scroll; no funciona en <td> , mientras se overflow:hidden; ¿funciona bien?

<table border="1" style="table-layout:fixed; width:100px">
  <tr>
    <td style="overflow:scroll; width:50px;">10000000000000000000000000000000000</td>
    <td>200</td>
    <td>300</td>
  </tr>
</table>

De las especificaciones de CSS ^{1 , 2} , no puedo ver por qué.

Answer 1

¡Tengo algo de aquí !

Andrew Fedoniouk escribió:

Esta es en realidad mi pregunta: "Una razón técnica es que la propiedad de desbordamiento no se aplica a las tablas". - ¿por qué? ¿Cuál es esta razón?

No soy un experto, pero creo que esto es solo por compatibilidad hacia atrás con el comportamiento de la tabla heredada. Puede verificar el algoritmo de diseño de tabla "automático" en la especificación. Estoy bastante seguro de que este algoritmo de diseño es incompatible con la propiedad de desbordamiento (o, más exactamente, el algoritmo de diseño nunca dará como resultado la necesidad de ningún valor de desbordamiento excepto ''visible'').

Sí, es por eso que estoy preguntando. Parece que no hay razones formales por las cuales o no deberían ser desplazables, pero parece que los vendedores de UA llegaron a un acuerdo silencioso en esta área. Así es la pregunta.

La especificación está de acuerdo con usted con respecto a los elementos. Las celdas de la tabla deben respetar el desbordamiento, aunque Mozilla, al menos, parece no hacerlo. No puedo responder a tu pregunta en este caso, aunque aún así creo que la respuesta todavía está vinculada a la representación heredada.

El hilo principal está aquí .

Answer 2

Primero proporcione la altura deseada a td y luego aplique la propiedad "float: left" a la "td" respectiva en la que desea que aparezca la barra de desplazamiento.

Answer 3

Tienes que envolverlo en un div, que funcionará:

<table border="1" style="table-layout:fixed; width:500px">
  <tr>
    <td style="width:100px;"><div style="overflow:scroll; width:100%">10000000000000000000000000000000000</div></td>
    <td>200</td>
    <td>300</td>
  </tr>
</table>