Usar CSS para crear celdas de tabla de un ancho específico sin ajuste de palabras

Question

En un proyecto en el que estuve involucrado, necesitaba representar tablas con columnas de un ancho específico con solo una línea HTML por fila de la tabla (sin ajuste).Necesito que cada celda de la tabla tenga un relleno de 1 píxel en la parte superior e inferior y 2 píxeles a la izquierda y a la derecha.La mejor manera que se me ocurre que funcione navegador cruzado es poner un div dentro de un td dentro de la tabla de esta manera:

<style>
  table.grid { border: none; border-collapse: collapse; }
  table.grid tbody tr td { padding: 1px 2px; }
  table.grid tbody tr td div { overflow: hidden; white-space: nowrap; }
  table.grid tbody tr td.one { width: 100px; }
  table.grid tbody tr td.two { width: 200px; }
</style>
<table class="grid">
  <tbody>
    <tr>
      <td class="one"><div>One</div></td>
      <td class="two"><div>Two</div></td>
    </tr>
    <tr>
      <td class="one"><div>Another One</div></td>
      <td class="two"><div>Another Two</div></td>
    </tr>
  </tbody>
</table>

Me encantaría poder eliminar la necesidad de agregar el div adicional.He pasado muchas horas buscando en Google este problema pero no encuentro una alternativa.

¿Hay alguna manera de hacer lo que necesito sin la necesidad de agregar el div adicional?Si es así, ¿qué es?

¿Existe alguna forma de obtener el resultado deseado sin utilizar tablas?

Answer 1

Desafortunadamente, los elementos de la tabla no respetan el desbordamiento, por lo que deberás aplicarlo a un elemento secundario.

editar:Puede que haya hablado demasiado pronto, ya que puedo crear este efecto en FF usando max-width y he descubierto esta cosa que podría funcionar para IE.Aprendes algo cada día.

editar2:Sí, funciona al menos para IE7, pero hay una advertencia seria: no puedes tener espacios en blanco en el texto, deben convertirse a  .Creo que probablemente deberías seguir con el <div> solución por razones de limpieza y compatibilidad.

Answer 2

De hecho, puede.

Normalmente, la mesa ocupa el espacio que necesita.Si le das el table un 100% de ancho, tomará el 100% del con y compartir que entre las celulas respecto a sus contenidos.

No hay espacio libre en una tabla:en algún momento, debe haber una celda que ocupe el espacio restante una vez fijado el tamaño de los demás.

Para establecer el ancho de una celda, deberá dale un width y un max-width al mismo tamaño.Para una tabla con N columnas, puede hacer lo mismo con N-1 columnas, y la última columna ocupará el espacio restante.

Si hace eso con N-2 columnas, las dos columnas que no se han arreglado compartirán el espacio restante.

Teniendo todo esto, puedes agregar white-space:no-wrap y/o text-overflow:ellipsis si lo desea.

Aquí hay una imagen de ejemplo (mi lector de RSS): https://i.stack.imgur.com/bPpKP.png

Y un ejemplo en vivo: https://codepen.io/lehollandaisvolant/pen/REVNLy?editors=1100

Puedes ver que en realidad es increíblemente poderoso.En el codepen, puedes ver:

• algunas celdas tienen un ancho fijo
• algunas celdas se ajustan al texto que contiene
• Algunas celdas se ajustan al contenedor.

Y puedes decidir el comportamiento de cada celda (siempre que haya una celda que se ajuste al contenedor)

Answer 3

No debería necesitar anidar un div dentro de cada celda de la tabla. Lo siguiente debería lograr el mismo efecto.

<style>
  table.grid { border-collapse: collapse; }
  table.grid tbody tr td { overflow: hidden; white-space: nowrap; padding: 1px 2px; }
  table.grid tbody tr td.one { width: 100px; }
  table.grid tbody tr td.two { width: 200px; }
</style>
<table class="grid">
  <tbody>
    <tr>
      <td class="one"><span>One</span></td>
      <td class="two"><span>Two</span></td>
    </tr>
    <tr>
      <td class="one"><span>Another One</span></td>
      <td class="two"><span>Another Two</span></td>
    </tr>
  </tbody>
</table>

Answer 4

También puede simplemente reemplazar la tabla por div.

Luego, debe definir el ancho de la columna en CSS (que puede ser complicado para trabajar en todos los navegadores).

Ejemplo: su código se vería así:

<div class="mainBoxOfTable">
    <div class="Line">
      <div class="ColumnOne">One</div>
      <div class="ColumnTwo">Two</div>
    </div>
    <div class="Line">
      <div class="ColumnOne">another One</div>
      <div class="ColumnTwo">another Two</div>
    </div>
 </div>