テキスト ファイルから読み込まれるテーブルがあります。テーブルはコンテナ div 内に含まれています。テーブルのスタイルを設定しましたが、コンテナー div の幅に対してテーブルの列が多すぎると、コンテンツがオーバーフローし、スクロール可能になりました。これは問題ではありませんが、オーバーフローが発生した時点から、テーブルのスタイルは適用されなくなります。
画像をご覧ください:
このテーブルのスタイルは次のとおりです。
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;
}
なぜこれが起こっているのか、そしてそれを修正するために何ができるのかを誰か説明してもらえますか? ありがとうございました