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!

Answer 1

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

Answer 2

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.