CODEWITHSUNDEEP
htmlcssoverflowcss-tables
Niel Sarvari
Niel Sarvari

Reputation: 113

CSS not being applied to overflow

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

Upvotes: 0

Views: 502

Answers (1)

Vuk Stanković
Vuk Stanković

Reputation: 7964

Try this

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

Upvotes: 2

Related Questions