Member Avatar for gallopers

hi all,
i am a begginner and would like to know when using tables on my page the text lines up in the five tables untill you open the page in a smaller window.
eg name ph address ect then when you open the favorites and the page gets narrow the text in the tables gets out of line.
i would like the page to go off to the right and the text to still line up.
can someone help with the html to do this on my page and where to put it please.

  • 2 Contributors
  • 3 Replies
  • 72 Views
  • 20 Hours Discussion Span
  • Latest Post Latest Post by FC Jamison

Dani AI

Generated

As described, the columns line up at full width but shift when the browser narrows. pointed toward constraining the layout; building on that, use one of two practical approaches: keep a stable table geometry and let the page scroll horizontally, or switch to a responsive stacked layout for small viewports. Both keep your labels (name, phone, address, etc.) aligned in predictable ways.

A simple, low-risk solution is to wrap the table in a scrollable container and use a fixed table layout so columns do not reflow as width changes. Place this CSS in your stylesheet or inside a <style> block in the document head.

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

.table-wrap table {
  border-collapse: collapse;
  table-layout: fixed;
  min-width: 800px;
}

.table-wrap th,
.table-wrap td {
  white-space: nowrap;
  padding: 6px 8px;
}

Troubleshooting: if cell content contains long words or URLs, add word-break: break-word or allow wrapping on specific cells. Use <colgroup> to set exact column proportions when needed. For phones, use a media query to remove min-width and convert rows to stacked blocks for readability. Test by resizing in developer tools to confirm alignment and scroll behavior.

Recommended Answers

All 3 Replies

Member Avatar for FC Jamison

You need to add a width to your table.

Member Avatar for gallopers

thank you, it sounds silly but when you are learning the simple things are sometimes the most difficult to work out. cheers gallopers

Member Avatar for FC Jamison

we were all beginners once...and the little details are easy to overlook.

I've had this problem myself...lol That's wht I knew the answer!

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.