CSS not being applied to overflow

Question

I have a table that gets loaded from a text file. The table is contained within a container div. I've styled the table, but when the table has too many columns for the width of the container div, the content overflows and is now scroll-able. This is not a problem, however, from the point where the overflow occurs, the styling for the table does not apply anymore.

Please have a look at the image:

Table with overflow content

The styling for this table is below:

table.static {
 width: 100%;
 margin-bottom: 0!important;
 margin-top: 0!important;
}

table.static thead {
  background: #D0D6DA;
  border-bottom: 1px solid #aaa;
}

table.static thead tr th {
 border-left: none;
 border-right: none;
 line-height: 30px;
 padding: 0 10px;
 text-align: left;
 color: #333;
 font-weight: 400;
 text-shadow: 0 1px 0 #fff;
}

table.static tbody tr td {
 line-height: 25px;
 padding: 0 10px;
 border: 0 solid #999;
}

table.static tbody tr td {
 border-bottom: 1px solid #E1E5E7;
}

table.static tbody tr:last-child td {
 border-bottom: 0;
}

table.static tbody tr.even td {
 background-color: #EDF1F3;
 border-bottom: 1px solid #D8DCDE;
}

table.static tbody tr td input,
table.static tbody tr td button {
 margin: 10px 0;
}

Can anyone please explain why this is happening, and what I can do to fix it? Thank you

A JSFiddle (or similar) would be helpful to illustrate your point. — jaypeagi
– jaypeagi, Commented Dec 18, 2012 at 11:06

Vuk Stanković · Accepted Answer · 2012-12-18 11:08:12Z

2

Try this

table.static {
    min-width: 100%;
    margin-bottom: 0!important;
    margin-top: 0!important;
}

answered Dec 18, 2012 at 11:08

Vuk Stanković

7,97410 gold badges46 silver badges70 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Vuk Stanković Over a year ago

It's because your table is more than 100% of screen wide (at least it is my guess), and you have set "fixed" width of 100%. This way you have set your table to be at least 100% wide but it can strech if it is required.

Collectives™ on Stack Overflow

CSS not being applied to overflow

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related