Table inside div overflowing

问题

I have a very basic CSS question. I have a div with fixed height and I have a table inside that div.

The content of the table will not fit in the div unless the div gets a scrollbar. The problem is now, the content of the table is overflowing the div as its height is more than the height I set on the div.

This is what I have for the Div

 display: inline-block;
    float: left;
    max-height: 200px;

Here is an example.

jsfiddle

How do I get the table to fit in the div and have a scrollbar? This is not specific to any browser. I tried both in Chrome and IE myself.

回答1:

[edit] Quoting your request:

How do I get the table to fit in the div and have a scrollbar.

Add the following to .test (fiddle)

overflow-y:scroll;

Documentation for overflow-y

回答2:

.test {
  background-color: gray;
  display: inline-block;
  float: left;
  max-height: 200px;
  overflow-y: scroll;
}
.matrix td, .matrix th{
  border: 0.1em solid #E2E2E2;
  padding: 4px 2px;
  min-width: 65px;
  white-space: normal;
  text-align: center;
}

来源：https://stackoverflow.com/questions/13770928/table-inside-div-overflowing