CSS / Javascript para forzar la fila de la tabla html en una sola línea

Tengo una tabla HTML que se ve así:

------------------------------------------------- |Column 1 |Column 2 | ------------------------------------------------- |this is the text in column |this is the column | |one which wraps |two test | ------------------------------------------------- 

Pero quiero que oculte el desbordamiento. La razón aquí es que el texto contiene un enlace para más detalles, y tener el “envoltorio” desperdicia mucho espacio en mi diseño. Debería tener esto en cuenta (sin boost el ancho de las columnas o la tabla, ya que saldrán de la pantalla / crearán una barra de desplazamiento horizontal en caso contrario):

 ------------------------------------------------- |Column 1 |Column 2 | ------------------------------------------------- |this is the text in column |this is the column | ------------------------------------------------- 

He intentado muchas técnicas diferentes de CSS para tratar de conseguir esto, pero no puedo hacerlo bien. Mootables es lo único que he encontrado que hace esto: http://joomlicious.com/mootable/ , pero no puedo entender cómo lo hacen. ¿Alguien sabe cómo puedo hacer esto con mi propia mesa usando CSS y / o Javascript, o cómo lo hace Mootables?

Muestra de HTML:

  
Column 1Column 2
this is the text in column one which wraps this is the column two test

Utilice la propiedad CSS espacio en blanco: nowrap y overflow: oculto en su td.

Actualizar

Acabo de ver tu comentario, no estoy seguro de lo que estaba pensando, lo he hecho tantas veces que olvidé cómo lo hago. Este es un enfoque que funciona bien en la mayoría de los navegadores para mí … en lugar de tratar de restringir el td, utilizo un div dentro del td que manejará la instancia de desbordamiento. Esto tiene un bonito efecto secundario de poder agregar su relleno, márgenes, colores de fondo, etc. a su div en lugar de tratar de darle estilo al td.

      
Column 1Column 2
this is the text in column one which wraps
this is the column two test

Como beneficio adicional, IE colocará una elipsis en el caso de un desbordamiento usando el desbordamiento de texto específico del navegador: estilo de elipsis. Hay una manera de hacer lo mismo en Firefox también automáticamente, pero no lo he probado yo mismo.

Actualización 2

Empecé a utilizar este código de truncamiento de Justin Maxwell durante varios meses, que también funciona correctamente en Firefox.

Este truco aquí es usar el table-layout:fixed esotérico table-layout:fixed regla table-layout:fixed

Este CSS debe funcionar en contra de su HTML de muestra:

 table {table-layout:fixed} td {overflow:hidden; white-space:nowrap} 

También debe especificar los anchos de columna explícitos para los

s.

El table-layout:fixed regla table-layout:fixed dice “El ancho de las celdas de esta tabla depende de lo que digo, no del contenido real en las celdas”. Esto es útil normalmente porque el navegador puede comenzar a mostrar la tabla después de haber recibido el primer

. De lo contrario, el navegador debe recibir toda la tabla antes de que pueda calcular el ancho de las columnas.

Tratar:

 td, th { white-space: nowrap; overflow: hidden; } 

Para aquellos más interesados:

Células de tabla dinámicas existentes: ## Texto largo sin ESPACIOS, es decir, direcciones de correo electrónico ##

Parece una replicación completa del uso de MS de texto (y otros) de text-overflow:ellipsis de text-overflow:ellipsis no pueden ser engañados en FireFox en lo que se refiere a la adición de los adjuntos internamente al texto recortado; especialmente sin javascript que a menudo el usuario está desconectado en estos días.

Todas las ideas que he encontrado para ayudarme han fallado al abordar el cambio de tamaño dynamic y el texto largo sin espacios.

Sin embargo, tenía una necesidad de recorte en una tabla de ancho dynamic en una de las ventanas de administración de mi prog. Entonces, con un poco de manipulación, se puede piratear una respuesta aceptable de todos los navegadores de las muestras suministradas en “MSDN”.

es decir

 
fasfasfasfasfsfsffsdafffsafsfsfsfsfasfsfsfsafsfsfsfWe hold these truths to be self-evident, that all people are created equal.

La única pequeña deficiencia es que los usuarios de Firefox no ven el bit “…”; lo cual es importante, realmente no me importa en esta etapa.

Future FF debería, con suerte, resolver con gracia si se implementa esta opción útil tan importante. Por lo tanto, ahora no es necesario volver a escribir usando contenido futurista no organizado menos favorable tampoco (no discuta, hay muchos sitios web rotos en este momento).

Gracias a: http://msdn.microsoft.com/en-us/library/ms531174(VS.85).aspx

Espero que ayude a alguien.

Como dijo cletus, debería usar white-space: nowrap para evitar el white-space: nowrap de línea, y overflow:hidden para ocultar el desbordamiento. Sin embargo, para que un texto se considere desbordamiento, debe establecer el ancho td / th, por lo que en caso de que el texto requiera más ancho que el especificado, se considerará un desbordamiento y se ocultará.

Además, si proporciona una página web de muestra, los respondedores pueden proporcionarle una página actualizada con la corrección que desee.

Si oculta el desbordamiento y hay una palabra larga, corre el riesgo de perder esa palabra, por lo que podría ir un paso más allá y usar el atributo css “word-wrap”.

http://msdn.microsoft.com/en-us/library/ms531186(VS.85).aspx

Me pregunto si valdría la pena usar PHP (u otro lenguaje de scripting del lado del servidor) o Javascript para truncar las cadenas a la longitud correcta (aunque calcular la longitud correcta es complicado, a menos que uses una fuente de ancho fijo).

Usar posición: absoluta; y ancho: xxx%; en el elemento td.

Si no desea que el texto se ajuste y no desea que el tamaño de la columna aumente, configure el ancho y el alto en la columna y configure “overflow: hidden” en su hoja de estilo.

Para hacer esto solo en una columna, querrá agregar una clase a esa columna en cada fila. De lo contrario, puede configurarlo en todas las columnas, eso depende de usted.

Html:

 
Column 1Column 2
this is the text in column one which wraps this is the column two test

hoja de estilo:

 .column-1 { overflow: hidden; width: 150px; height: 1.2ex; } 

Una ex unidad es el tamaño de fuente relativo para la altura, si está utilizando píxeles para establecer el tamaño de la fuente que desea usar en su lugar.