Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • CSS3 Display Table Property

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 287
    Comment on it

    In this blog you come to know about making of HTML table by div

    tag. It shows how display: table-cell and display: table in CSS3 works. The styling is used to make elements, such as

    tags behave like and
    tags. so tags should be reserved for data thats structured in a table format, and if you just want a grid layout that behaves a bit like a table, use
    tags with display: table-cell instead. display: table-* options are supported in any major browser, and for IE support version starts from IE8 onwards.

    How to use display: table & display: table-cell :-

    here is the HTML -

    <div class="tableContainer">
             <div class="tableColumn">column1</div>
             <div class="tableColumn">column2</div> 
             <div class="tableColumn">column3</div> 
    </div> 
    

    Apply css for this HTML -

    tableContainer{ display: table;}
    .tableColumn {display : table-cell; padding:2px; border:1px solid #ddd;}
    

    If we want multiple rows we can also include display: table-row;

    HTML :-

    <div class="tableContainer">
         <div class="tableRow">
             <div class="tableColumn">column1</div>
             <div class="tableColumn">column2</div> 
             <div class="tableColumn">column3</div> 
        </div>
       <div class="tableRow">
             <div class="tableColumn">column4</div>
             <div class="tableColumn">column5</div> 
             <div class="tableColumn">column6</div>
         </div>
    </div>
    

    CSS:-

    .tableContainer{ display: table;}
    .tableColumn {display : table-cell; padding:2px; border:1px solid #ddd;}
    

    Proportional width columns

    Expanding the width of the element to fill the available space in proportion to the size of the content. We can set the width on the display: table element to 100%:

    HTML

    <div class="tableContainer">
            <div class="tableColumn">Column 1.</div>
            <div class="tableColumn">Column 2 is a bit longer.</div>
            <div class="tableColumn">Column 3 is longer with lots of text in it.</div>
    </div>
    

    css

    .tableContainer {display: table; width: 100%;}
    .tableColumn {display: table-cell;  border:1px solid #000}
    

    Equal height columns

    Columns expand to match the height of the largest column in the row. The height is defined by the content and not an explicit fixed height.

    HTML

    <div class="tableContainer">
            <div class="tableColumn">Column 1.</div>
            <div class="tableColumn">Column 2 is a bit longer.</div>
            <div class="tableColumn">Column 3 is longer with lots of text in it.</div>
    </div>
    

    css

    .tableContainer { display: table;}
    .tableColumn {display: table-cell;width: 100px; border:1px solid #000}
    

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: