CSS - restrict cell width to be not more than remaining space [duplicate]_问答_开发者

CSS - restrict cell width to be not more than remaining space [duplicate]

开发者 https://www.devze.com 2022-12-20 07:48 出处：网络

This question already has answers here: Tables overflowing with CSS in Firefox (2 answers) Closed 5 years ago.

This question already has answers here: Tables overflowing with CSS in Firefox (2 answers) Closed 5 years ago.

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 tabl开发者_如何学运维e 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).

Sorry to answer my own question...

The missing ingredient seems to be table-layout:fixed - this seems to achieve the effect I want.

This came from Tables overflowing with CSS in Firefox.