Cómo ajustar una columna en una tabla, con la tabla del tamaño de la ventana del navegador

I have a HTML table with 3 'groups' of columns, left, middle and right.

+----------------------------------+
| L-1 | L-2 | M          | R1 | R2 |
+-----+-----+------------+----+----+
|  x  |  z  | aaaaaaa... |  1 |  2 |
|  y  |  w  | bbbbbbb... |  3 |  4 |
+-----+-----+------------+----+----+

I would like to confine the table to the width of the browser window, when there is a very long string in the middle ("M") column.

I tried to use CSS word-break on this column, as described in wordwrap a very long string.

Below is the HTML (exemplified). The CSS contains my thoughts regarding how this should (but apparently doesn't) work.

¿Qué estoy haciendo mal?

<html>
 <head>
  <style type='text/css'>
   table { /* nothing here - table is block, so should auto expand to as large as it can get without causing scrollbars? */ }
   .left { text-align:center; }
   .right { text-align:right; }
   .middle { text-align:left; width:100%; /* expand this column to as large as it can get within table? */}
   .wrap { word-wrap:break-word; width:100%; /* use up entire cell this div is contained in? */ }
  </style>
 </head>
 <body>
  <table>
   <tr>
    <th class=left>L-1</th>
    <th class=left>L-2</th>
    <th class=middle>M</th>
    <th class=right>R-1</th>
    <th class=right>R-2</th>
   </tr>
   <tr>
    <td class=left>argle</td>
    <td class=left>bargle</td>
    <td class=middle><div class=wrap>wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww</div></td>
    <td class=right>glyp</td>
    <td class=right>glof</td>
   </tr>
  </table>
 </body>
</html>

The result right now is that no word wrapping takes place, instead the table unwantedly shoots out to the far right and causes a scrollbar in the browser window.

preguntado el 08 de enero de 11 a las 20:01

3 Respuestas

This seems to work perfectly:

<!DOCTYPE html>
<html>
 <head>
  <style type='text/css'>
   th,td { vertical-align:top; padding:0 5px; }
   .left { text-align:center; }
   .right { text-align:right; }
   .middle { text-align:left; width:100%; }
  </style>
 </head>
 <body>
  <table>
   <tr>
    <th class=left>L-1</th>
    <th class=left>L-2</th>
    <th class=middle>M</th>
    <th class=right>R-1</th>
    <th class=right>R-2</th>
   </tr>
   <tr>
    <td class=left>argle</td>
    <td class=left>bargle</td>
    <td class=middle>w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;</td>
    <td class=right>glyp</td>
    <td class=right>glof</td>
   </tr>
  </table>
 </body>
</html>

The trick above is to just insert a non-visible whitespace (&#x200b;) every now and then.

I hate answering my own questions though, so I'll wait for someone to come up with something prettier before closing this.

Respondido el 10 de enero de 11 a las 22:01

Pertinent changes:

  • Adicional table { table-layout:fixed } a su CSS.
  • Adicional width="100%" para usted table.
  • Removed the extraneous div, and added the .wrap clase a tu td con clase .middle.
  • Agregó el width=100 attribute to your other columns.

Full HTML:

<html>
 <head>
  <style type='text/css'>
   table { table-layout:fixed; /* nothing here - table is block, so should auto expand to as large as it can get without causing scrollbars? */ }
   .left { text-align:center; }
   .right { text-align:right; }
   .middle { text-align:left; /* expand this column to as large as it can get within table? */}
   .wrap { word-wrap:break-word; /* use up entire cell this div is contained in? */ }
  </style>
 </head>
 <body>
  <table width="100%">
   <tr>
    <th class=left width=100>L-1</th>
    <th class=left width=100>L-2</th>
    <th class=middle>M</th>
    <th class=right width=100>R-1</th>
    <th class=right width=100>R-2</th>
   </tr>
   <tr>
    <td class=left>argle</td>
    <td class=left>bargle</td>
    <td class="middle wrap">wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww</td>
    <td class=right>glyp</td>
    <td class=right>glof</td>
   </tr>
  </table>
 </body>
</html>

Respondido el 09 de enero de 11 a las 14:01

Thanks for giving it a go! Does not quite work, the L and R columns contain user input, therefore I cannot fix them to 100 pixels. - Rosenfield

This works at first glance:

<!DOCTYPE html>
<html>
 <head>
  <style type='text/css'>
   td { vertical-align:top; }
   .left { text-align:center; }
   .right { text-align:right; }
   .middle,
   .middle iframe { width:100%; }
  </style>
 </head>
 <body>
  <table>
   <tr>
    <th class=left>L-1</th>
    <th class=left>L-2</th>
    <th class=middle>M</th>
    <th class=right>R-1</th>
    <th class=right>R-2</th>
   </tr>
   <tr>
    <td class=left>argle</td>
    <td class=left>bargle</td>
    <td class=middle><iframe style='border:0' src='data:text/html,%3Cbody style=%22margin:0;word-wrap:break-word%22%3Ewwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww%3C/body%3E'></iframe></td>
    <td class=right>glyp</td>
    <td class=right>glof</td>
   </tr>
  </table>
 </body>
</html>

But breaks when you add another row, because the embedded iframe has static height.

Respondido el 10 de enero de 11 a las 21:01

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.