0

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
12
Views
7 Years
Discussion Span
Last Post by tinimic
0

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.

0

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.

Edited by Virangya: n/a

Attachments table.JPG 66.7 KB
0

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.

0

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

0

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::'(:-/

1

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>
0

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..!

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.