locked
How to set size of table in HTML and CSS

    Question

  • I'm creating a table using HTML and CSS and I'm having difficulty setting it up correctly.  I want it to fit into my table I've defined for it in my CSS, but it's not doing it.

    HTML: 

    		<div id="demographicForm">
                        <table>
                            <thead>
                                <tr>
                                    <th>Social Security:</th>
                                    <th>Date of Birth:</th>
                                    <th>Nationality:</th>
                                </tr>
                                <tr>
                                    <th>Age:</th>
                                    <th>Gender</th>
                                    <th>Marital Status:</th>
                                </tr>
                                <tr>
                                    <th>Occupation:</th>
                                    <th>Address:</th>
                                    <th>City:</th>
                                </tr>
                                <tr>
                                    <th>State:</th>
                                    <th>Zip:</th>
                                    <th>Phone:</th>
                                </tr>
                                <tr>
                                    <th>E-mail:</th>
                                    <th>Diagnosis:</th>
                                    <th>Physician:</th>
                                </tr>
                            </thead>
                            <tbody id="interiorDemographic"></tbody>
                        </table>
                        <button id="editDemographic" type="button">Edit</button>
                    </div>


    And the associated CSS: #pageDivided and #listView are not in the HTML you see. But pageDivided sets up the layout of the screen, and listView places a listView in column 1 row 1 of the page layout. 

    /*div setting up the page layout*/

    #pageDivided{ -ms-grid-column: 3; -ms-grid-row: 1; display: -ms-grid; -ms-grid-columns: 365px 60fr 900px; -ms-grid-rows: 1fr; width: 1188px; }

    /*list view you can see in the picture*/ #listView{ -ms-grid-column: 1; -ms-grid-row: 1; }

    /*div around the table*/ #demographicForm{ -ms-grid-column: 3; -ms-grid-row: 1; } /*tbody*/ #interiorDemographic{ -ms-grid-column: 4; -ms-grid-row: 7; display: -ms-grid; -ms-grid-columns: 200px 200px 200px 200px; } /*edit button*/ #editDemographic { -ms-grid-column: 4; -ms-grid-row: 7; }

    Here's what it looks like:

    I don't understand why the first column is taking up the whole table size I wanted each of the columns to fit in. I also don't understand why the button is in the correct row, but all the way to the left in column 1 when i said column 4 in the CSS. 

    Thanks!


    Monday, April 22, 2013 3:51 PM

Answers

  • Thanks Girija, i don't know how I didn't realize the button wasn't actually inside of the table format I setup in the CSS. noticing that and seeing your comment got me to make another Div inside of demographicForm and outside of the table. That's where I setup the table in the CSS and it now works after that. The table wanted to format itself instead of me telling it what to do in the CSS.  
    • Marked as answer by ZachAtttack Tuesday, April 23, 2013 1:19 PM
    Tuesday, April 23, 2013 1:19 PM

All replies

  • Hi,

    The button will not find column 4 and will fit where ever it finds gap that is why you are seeing the behavior.

    I see that you have not given the complete CSS and HTML, without that it becomes difficult to figure out what the exact issue is.

    I see some issues like :

    The interiorDemographic is a part of table , why are you assigning it a column and row. It is a table body and will go where the table is specified.

    try this :

    #demographicForm{
    -ms-grid-column: 3;
    -ms-grid-row: 1;
    width : 100%;

    height: 100%
    }

    And see if that fits :

    - Girija

    Monday, April 22, 2013 10:03 PM
  • Thanks Girija, i don't know how I didn't realize the button wasn't actually inside of the table format I setup in the CSS. noticing that and seeing your comment got me to make another Div inside of demographicForm and outside of the table. That's where I setup the table in the CSS and it now works after that. The table wanted to format itself instead of me telling it what to do in the CSS.  
    • Marked as answer by ZachAtttack Tuesday, April 23, 2013 1:19 PM
    Tuesday, April 23, 2013 1:19 PM