CODEWITHSUNDEEP
htmlcss
Inkey
Inkey

Reputation: 2207

CSS Table Resizing inside a DIV

I have a table which i am having trouble with. I would like to have both tables side by side in the Div both of equal widths. I have tried to manually set the widths ect but with no success any help at all with this would be great.

It looks like this currently enter image description here

Html

<div class = "CoresAreaDiv"> 


<label class="CoresLabel">CoreShop</label>  

<table  class="CoreShopTable"  >

<tr>
<th>
L1
</th>

<td>@ViewData["L1"]</td>

</tr>
<tr>
<th>L2</th>
<td>@ViewData["L2"]</td>
</tr>
<tr>
<th>L3</th>
<td>@ViewData["L3"]</td>
</tr>
<tr>
<th>L4</th>
<td>@ViewData["L4"]</td>
</tr>
<tr>
<th>L5</th>
<td>@ViewData["L5"]</td>
</tr>
<tr>
<th>L6</th>
<td>@ViewData["L6"]</td>
</tr>
<tr>
<th>L7</th>
<td>@ViewData["L7"]</td>
</tr>
<tr>
<th>L8</th>
<td>@ViewData["L8"]</td>
</tr>
</table>

<table class="CoreShopTable2">

<tr>
<th>L9</th>
<td>@ViewData["L9"]</td>
</tr>

<tr>
<th>L10</th>
<td>@ViewData["L10"]</td>
</tr>

<tr>
<th>L11</th>
<td>@ViewData["L11"]</td>
</tr>

<tr>
<th>L12</th>
<td>@ViewData["L12"]</td>
</tr>

<tr>
<th>L13</th>
<td>@ViewData["L13"]</td>
</tr>

<tr>
<th>L14</th>
<td>@ViewData["L14"]</td>
</tr>

<tr>
<th>L15</th>
<td>@ViewData["L15"]</td>
</tr>

<tr>
<th>L18</th>
<td>@ViewData["L18"]</td>
</tr>




</table>

</div>

The CSS code for the following is

    .CoresAreaDiv 
{

 width:50%;

}


}
table.CoreShopTable
{
    text-align: left;
    margin: 45px;
    border-collapse: collapse;
    font-family: "Lucida Sans Unicode" , "Lucida Grande" , Sans-Serif;
    width: 20%;;
    position: relative;
    float: left;
}


table.CoreShopTable th
{
    width: 2%;
    font-weight: normal;
    padding: 8px;
    background: #b9c9fe url('table-images/gradhead.png') repeat-x;
    border-top: 2px solid #d3ddff;
    border-bottom: 1px solid #fff;
    color: #039;
    font-size: larger;
    font-weight: bolder;
    text-align: center;
}


table.CoreShopTable td
{
    padding: 8px;
    border-bottom: 1px solid #fff;
    color: #669;
    border-top: 1px solid #fff;
    background: #e8edff url('table-images/gradback.png') repeat-x;
    font-size: larger;
    text-align: center;
    width: 2%;
}

table.CoreShopTable td:hover
{
    background: #d0dafd url(C:\Users\pbrady\Desktop\Code\MvcApplication1\MvcApplication1\Images\gradhover.png);
    color: #339;
}


table.CoreShopTable2
{
    text-align: left;
    margin: 45px;
    border-collapse: collapse;
    font-family: "Lucida Sans Unicode" , "Lucida Grande" , Sans-Serif;
    width: 50px;
    float: right;
    right: -50px;
    top: -357px;
    position: relative;

}

table.CoreShopTable2 th
{
    width: 20%;
    font-weight: normal;
    padding: 8px;
    background: #b9c9fe url('table-images/gradhead.png') repeat-x;
    border-top: 2px solid #d3ddff;
    border-bottom: 1px solid #fff;
    color: #039;
    font-size: larger;
    font-weight: bolder;
    text-align: center;
}


table.CoreShopTable2 td
{
    padding: 8px;
    border-bottom: 1px solid #fff;
    color: #669;
    border-top: 1px solid #fff;
    background: #e8edff url('table-images/gradback.png') repeat-x;
    font-size: larger;
    text-align: center;
}

Upvotes: 1

Views: 4943

Answers (3)

electrikmilk
electrikmilk

Reputation: 1043

It could be the div, it's sparating the tables, I don't see why you don't just have in in another row in that table, and not just the same table but I'm sure you have you're reasons,

.CoresAreaDiv {
margin: 0;
padding: 0;
}

or....

you could just remove the left border of the second table:

.CoreShopTable2 tr {
border-left: none;
margin-left: 0; /* to make sure there is still no awkward space */
}

or keep the border, whichever

Upvotes: 0

avrahamcool
avrahamcool

Reputation: 14094

here is a working fiddle: http://jsfiddle.net/avrahamcool/npvK5/

took me a while to figure-out what your problem was.

  1. you had an extra closing braclet } in your css. causing the stylesheet not to load correctly.

  2. your containing div was too small for 2 tables [on the fiddle page] (they need to be at least large as their content), so I dropped the width: 50%;. but on a regular page, you should have enough space, so you can bring it back.

  3. you had position: relative; all over the place, and unnecessary top & right declarations. with some margin to the tables that ruined everything. all of that is gone in the wind.

  4. I've dropped the width and padding declaration for th & td (some of them were 2% and some 20%, other were 50px, dude.. its a mess, bring them back as you need them. they shoud not affect the layout.

  5. I've add an <br/> to seperate the tables from the label.

  6. i've dropped all default margin & padding to gain use of all available space (using * selector).

while I was there, I took the liberty to fix some of your CSS as well, notice how my fiddle is clearer and easier. I've dropped some of the declaration, because they are default. remmember - less is more.

so, in conclution:

HTML:

<div class="CoresAreaDiv">
    <label class="CoresLabel">CoreShop</label>
    <br/>
    <table class="CoreShopTable">
        <tr>
            <th>L1</th>
            <td>@ViewData["L1"]</td>
        </tr>
        <tr>
            <th>L2</th>
            <td>@ViewData["L2"]</td>
        </tr>
        <tr>
            <th>L3</th>
            <td>@ViewData["L3"]</td>
        </tr>
        <tr>
            <th>L4</th>
            <td>@ViewData["L4"]</td>
        </tr>
        <tr>
            <th>L5</th>
            <td>@ViewData["L5"]</td>
        </tr>
        <tr>
            <th>L6</th>
            <td>@ViewData["L6"]</td>
        </tr>
        <tr>
            <th>L7</th>
            <td>@ViewData["L7"]</td>
        </tr>
        <tr>
            <th>L8</th>
            <td>@ViewData["L8"]</td>
        </tr>
    </table>
    <table class="CoreShopTable">
        <tr>
            <th>L9</th>
            <td>@ViewData["L9"]</td>
        </tr>
        <tr>
            <th>L10</th>
            <td>@ViewData["L10"]</td>
        </tr>
        <tr>
            <th>L11</th>
            <td>@ViewData["L11"]</td>
        </tr>
        <tr>
            <th>L12</th>
            <td>@ViewData["L12"]</td>
        </tr>
        <tr>
            <th>L13</th>
            <td>@ViewData["L13"]</td>
        </tr>
        <tr>
            <th>L14</th>
            <td>@ViewData["L14"]</td>
        </tr>
        <tr>
            <th>L15</th>
            <td>@ViewData["L15"]</td>
        </tr>
        <tr>
            <th>L18</th>
            <td>@ViewData["L18"]</td>
        </tr>
    </table>
</div>

CSS:

*
{
    margin:0;
    padding: 0;
}
table.CoreShopTable
{
    border-collapse: collapse;
    font-family:"Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
    width: 50%;
    float: left;
}
table.CoreShopTable th {
    background: #b9c9fe url('table-images/gradhead.png') repeat-x;
    border-top: 2px solid #d3ddff;
    border-bottom: 1px solid #fff;
    color: #039;
    font-size: larger;
    font-weight: bolder;
}
table.CoreShopTable td
{
    border-bottom: 1px solid #fff;
    color: #669;
    border-top: 1px solid #fff;
    background: #e8edff url('table-images/gradback.png') repeat-x;
    font-size: larger;
    text-align: center;
}

table.CoreShopTable td:hover {
    background: #d0dafd url(C:\Users\pbrady\Desktop\Code\MvcApplication1\MvcApplication1\Images\gradhover.png);
    color: #339;
}

Upvotes: 1

Sasidharan
Sasidharan

Reputation: 3750

It works..

<div width="100%">
<table width="48%">
//your stuff
</table>
<table width="48%">
//your stuff
</table>
</div>

table width can be maximum upto 50%.. If it doesnot work for you.Then use float:left;

Upvotes: 0

Related Questions