html表格整体高度怎么设置,如何设置html表格的高度和列宽？

I am attempting to control the height of a table body so that a scrollbar appears when more data than fits in a view is displayed, thead must stay visible. At the same time I'm trying to control the width of the table columns.

The table height can be controlled by setting 'display: block' in the table body css. The table body will now be limited by the container height or any height the table body is set to. This messes up the column widths though.

The column widths can be assured by setting as desired. As long as the tbody isn't set to 'display: block' the columns display properly but the tbody is out of control and ignores any height you may have set.

I'm trying to do this to make it possible for the result to be easily chapter 508 compliant for screen reader technology for those with disabilities. AT this point, I'm planning to convert to jquery.dataTables which puts a view port over top of a table so I can keep the 508 compliance and get the functionality I need. This seems way over the top for what I'm wanting to accomplish but I can't find a simple way to do it with a native table and basic css.

Test code is as follows:

MonthSavings

January$100February is a long month that seems like it could go on forever!$80March$180April$86May$98June$29July$44August$244

#div1 {

height: 100px;

width: 400px;

padding: .5px;

border: 1px solid red;

}

colgroup {

width: 100%;

}

#col-1 {

width:70%;

}

#col-2 {

width:30%;

}

table {

width: 100%;

table-layout: auto;

}

thead {

background-color: #B2DFFF;

}

tbody {

height: 72px;

overflow-y: scroll;

background-color: #F0F0F0;

/* display:block; This will set column width correctly but it messes up tbody height */

display:block; /* This will allow height to be set but it messes up columns width */

}

Does anyone have any ideas?