The important thing in my example below is the wideData class selector. I want

Question

0

Asked: May 13, 20262026-05-13T18:42:06+00:00 2026-05-13T18:42:06+00:00

The important thing in my example below is the wideData class selector. I want

0

The important thing in my example below is the wideData class selector. I want to use this to cause text surrounded by a wideData div to appear in a scroll box if it cannot otherwise be displayed without causing a horizontal scroll bar to appear on the containing browser window (overflow:auto).

This works as I want if the div is not contained within a table cell (try removing the table, td and td elements in the example and you’ll see what I mean). However if I place it in a table cell the contained text always takes as much space as it wants and the user has to scroll the containing page to see the right side of the text.

I do not want to specify absolute widths on the table or the cell. This layout is to be used in a situation where I want to display large amounts of text which can wrap normally but which is interspersed occasionally with little blocks of very wide text that must be displayed without wrapping (and which should appear in their own scroll boxes without causing the containing page to become really wide). And I don’t want to put an absolute width on the div elements – I want to display as much as possible of the “wide” text (and I know that my users do not have a standard screen/browser width).

<html>
  <head>
    <style>
      .wideData
      { 
        background-color:red;
        overflow:auto;
      } 
    </style>
    <title>Example</title>
  </head>
  <body>

    <table width="100%">
      <tr>
        <td>

A
<div class="wideData">
<pre>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</pre>
</div>
B

        </td>
      </tr>
    </table>

  </body>
</html>

PS you may ask why I’m mixing tables and CSS or if I have to use this layout. I’m restricted by having to live with content generated by a system that is not under my control. I can change the CSS rules – and if pushed could use something like Greasemonkey to change the delivered HTML on the client side (I’m not in a position to change it on the server side).