Member Avatar for ashneet

well the problem i have is that when i use tables on every diffrent screen the cells change their shape to fit the screen so all the text is wraped accordingly. is it possible to stop table from shrinking at a certain point so that the text wont wrap more to screw up the page. I am not very skilled at CSS but know little. any idea on how i can fix this problem...

  • 2 Contributors
  • 3 Replies
  • 130 Views
  • 11 Hours Discussion Span
  • Latest Post Latest Post by tgreer

Dani AI

Generated

A few practical ways to keep a table from collapsing or wrapping text into awkward shapes. raised the right problem; pointed toward fixed sizing — below are techniques that preserve column layout without forcing the entire page to a single pixel width.

Use a scrollable wrapper plus a minimum table width so the page layout stays intact on narrow viewports:

.table-wrap { overflow-x: auto; }

.table-wrap table { table-layout: fixed; min-width: 700px; width: 100%; }

td.no-wrap { white-space: nowrap; }

td.break { overflow-wrap: anywhere; }

Why this helps: table-layout: fixed makes the browser respect column widths instead of letting cell contents dictate sizes. min-width prevents the table from shrinking past a usable point. The wrapper’s overflow-x: auto lets the table scroll horizontally on small screens rather than squashing content. Use white-space: nowrap on specific cells you absolutely do not want wrapped, and use overflow-wrap (or word-break as needed) for long URLs/words that must break.

Lock specific column widths with a colgroup when you need precise control:

<table>
  <colgroup>
    <col style="width: 150px">
    <col style="width: 60%">
    <col style="width: 40%">
  </colgroup>
  ...
</table>

Troubleshooting: if widths still move, inspect computed styles in DevTools to find inherited rules; avoid competing width rules (e.g., pixel and percent on the same element). For small screens consider media queries that switch to a stacked layout or keep the wrapper scroll — horizontal scrolling inside a container is usually better UX than broken layout. See MDN for details on table-layout and overflow handling: table-layout and overflow-x.

Recommended Answers

All 3 Replies

Member Avatar for tgreer

That's what CSS is for: positioning, sizing, and styling HTML elements. It sounds like you're either not sizing your table elements, or if you are, you're using percentages.

Instead, you should provide CSS rules for the table, tr, and td elements, using absolute pixel measurements.

For example:

<style type="text/css">
table {width: 500px;}
</style>

Place that in the head of your document, and any table will be 500 pixels wide, no matter the browser window size or screen resolution.

Member Avatar for ashneet

What would you suggest the most common width size for a table with least comflicts with computer resolutions. as my screen resolution is 1280 x 1024 px so i see almost every website fine but that is not with everyone and i am trying to figure what size should my table should be so there are less chances of scroll bars popping up.

Member Avatar for tgreer

I suggest 1024x768 for most sites. I do a lot of work for government and financial institutions, which tend to lag behind the general public, so for them I try to work with 800x600.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.