CODEWITHSUNDEEP
htmlcss
Joe Half Face
Joe Half Face

Reputation: 2323

Table styling issue - column width

Here I provided jssfidle

How it looks now: enter image description here

What I want to achieve:

enter image description here

This is made through table and div with border and negative margins, and works really unpredictable in different browsers.

It should be one table, with three small menu columns on top, and below them 100% table width column with content. But in fiddle it works in different way, help me to fix that.

CSS:

#main_box{
    width:60%;
    box-sizing:border-box;   

}
table#menu_table{
    position:relative;
     width:100%;
     border-collapse: collapse;

}
td.menu_item{

   width: 10%; 
    border:solid 1px green;
}
tr#content_row{
    width:100%;
}
td#content{
 border:solid 1px green;

Upvotes: 0

Views: 66

Answers (3)

kevinandrada
kevinandrada

Reputation: 499

Append another <td> tag on the menu items then apply colspan="4" on the #content.

You can add a class to the appended <td> tag so that you can style that to border: 0;

View example JSFiddle here.

Upvotes: 0

Pramod Ravikant
Pramod Ravikant

Reputation: 1037

Use colspan. As you are you are yousing three column, use colspan="3" 

<td colspan="3">Table Cell</td>

Just replace your code with this: See this: http://jsfiddle.net/wf6GR/1/ 

    <td class="menu_item">publish</td>
    <td class="menu_item"> edit</td>
    <td class="menu_item"> delete </td>
        </tr>
        <tr id='content_row'>
   <td id="content" colspan="3">
       The aid issue in in the 1960s 
After the Second World War, Sweden’s first sense of affiliation was with the other Nordic 
countries. Its foreign policy was characterized  a will to decrease super power tensions by urging for patience and caution. Foreign Minister Östen Undén emphasised 
the importance of strengthening international law and thereby backing up the rights of 
small states. At the same time, Sweden was not believed to play a significant role in 
world politics and should not take side in any important security .  


            </td>
        </tr>

     </table>


  </div>

Upvotes: 1

Nick R
Nick R

Reputation: 7784

You need to use colspan and set up your table like this:

JSFiddle Demo

<table border="1" width="500" cellpadding="0" cellspacing="">
    <tr>
        <td>Table Cell</td>
        <td>Table Cell</td>
        <td>Table Cell</td>
        <td>Table Cell</td>
        <td>Table Cell</td>
    </tr>
    <tr>
        <td colspan="5">Table Cell</td>
    </tr>
</table>

But using a table for this is a bit wrong - you could have a look at jQueryTools - Tabs

Upvotes: 2

Related Questions