Member Avatar for Virangya

HELLO..

I've been designing web pages in dreamwaever 8 and i have put a table inside a div. No matter what i try the table wont scale accordingly inside the div. It always scales along the div. its width is 200px but automatically scale up to somewhere around 500px.. :(
If i remove div tag, then the table scales without any trouble.
what can i do for this?

thank you...

  • 5 Contributors
  • 10 Replies
  • 406 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by tinimic

Dani AI

Generated

Short summary and context: the table growing to ~500px while the surrounding div is supposed to stay at 200px is almost always a CSS inheritance or layout issue rather than a Dreamweaver bug. , and have already hit the main approaches (change how the div participates in layout, explicitly set widths, float the table). The missing step is to find what is forcing the table to take extra space (an inherited rule, an ancestor with a stretchy layout, or unbreakable content inside cells) and then stop that behavior.

Quick troubleshooting checklist:

  • Check the computed styles in a real browser (DevTools → Styles/Computed) to see which rule is giving the table its large width.
  • Look for global rules that target all tables (site CSS or a reset), or an ancestor that uses a layout mode that stretches children (display:table, display:flex, etc.).
  • Inspect cell content for wide elements (images, long words, links) that set a minimum width.

Practical fixes (works when the container must stay 200px but the table should be smaller):

  • Give the container a fixed width.
  • Give the table an explicit width less than the container and use fixed table layout so column sizing won’t be driven by content.
  • Allow cell content to wrap and scale images so they cannot force a larger minimum width.

Example (adapt and drop into the page’s stylesheet):

/* fixed container */
#panel { width: 200px; }

/* table kept smaller and prevented from auto-expanding */
#panel table.fixed {
  width: 140px;
  table-layout: fixed;
  border-collapse: collapse;
}
#panel table.fixed td { overflow-wrap: break-word; }

/* avoid images forcing expansion */
#panel table.fixed img { max-width: 100%; height: auto; }

Note: changing a div to behave like a table (as suggested) will make the div size to its contents; that helps when the goal is the opposite. The most reliable approach is to locate the overriding rule in DevTools and then apply one of the targeted fixes above (explicit table width + table-layout: fixed, wrapping rules, or image max-width).

Recommended Answers

All 10 Replies

Member Avatar for MidiMagic

It won't work outside dreamweaver either.

Add a style for div tags:

div {display: table-cell;}

Then the div will expand itself to fit the table inside.

Member Avatar for Virangya

Thankx for the reply..!
the thing is, my table width is smaller than the div. but still it scales larger...
also the css style i applied does not work for the table.

table{
background-color:#003333;
}

i tried applying your code, but still its the same... and here i attached a screen shot of my design.

table.JPG 66.7 KB
Edited by Virangya because: n/a
Member Avatar for Rajib Ganguly

First, set your CSS like this.

div#kol {width:200px ; height:auto:}
table {width:100%;}

As your div is 200px width. hope this will solve.

Member Avatar for Virangya

you mean... the id of the div tag you have taken as kol right???

Member Avatar for Rajib Ganguly

yeah! working??

Member Avatar for Virangya

Thanks for your reply!
No, it does not work... Your code stretches my div tag along the table... But thats not the way i want it to work.. i need to change the width of the table, keeping the div tags width same. :confused::'(:-/

Member Avatar for tinimic

Here's a small table inside a div. Created in Dreamweaver CODE view. I added some extra CSS to show different methods of formatting the table cells. Hope this helps.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
#container {
	height: 300px;
	width: 500px;
	border: thin dotted #0F0;
}
#small_table {
	float: left;
	width: 200px;
	border: thin solid #CCC;
	padding-top: 20px;
	padding-left: 20px;
}
#small_table tr {
	padding: .5em;
	height: 2em;
}
#small_table td {
	padding: 2%;
	width: 33.3%;
}
-->
</style>
</head>
<body>
<div id="container"><p style="margin: 0; float: right;">div id #container 500px X 300px</p>
  <table id="small_table">
    <caption>
    table id #small_table
    </caption>
    <tr>
      <td>r1c1</td>
      <td>r1c2</td>
      <td>r1c3</td>
    </tr>
    <tr>
      <td>r2c1</td>
      <td>r2c2</td>
      <td>r2c3</td>
    </tr>
    <tr>
      <td>r3c1</td>
      <td>r3c2</td>
      <td>r3c3</td>
    </tr>
    <tr>
      <td>r4c1</td>
      <td>r4c2</td>
      <td>r4c3</td>
    </tr>
    <tr>
      <td>r5c1</td>
      <td>r5c2</td>
      <td>r5c3</td>
    </tr>
  </table>
</div>
</body>
</html>
Member Avatar for Virangya

this do works thanx!
but, unfortunately...
my design is totally based on div tags... there is another parent div tag, when i remove that parent div. your code works. But i need to keep that div tag also... i can only hope... there is a solution for this parent div...

thanx a lot all of you..!

Member Avatar for karol33

yes u can also use z-index for divs

Member Avatar for tinimic

If you could post a sample of your markup and style it would be a lot easier to determine where any problem starts. You might want to look at the w3c box model recommendations at http://www.w3.org/TR/CSS2/box.html.

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.