CODEWITHSUNDEEP
htmlcsscss-tables
Krishna Veeramachaneni
Krishna Veeramachaneni

Reputation: 2141

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.

Upvotes: 4

Views: 13135

Answers (2)

Garry
Garry

Reputation: 5074

.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;
}

Upvotes: 1

canon
canon

Reputation: 41665

[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

Upvotes: 8

Related Questions