CSS: Scrollable Nested Table, работает в FF, не работает в IE - PullRequest
Новая
       22

CSS: Scrollable Nested Table, работает в FF, не работает в IE

4 голосов
/ 04 февраля 2009

Я бы очень хотел, чтобы это работало в IE. Я не могу изменить тот факт, что таблицы не должны использоваться здесь. IE - единственный браузер, который требуется для поддержки проекта, над которым я работаю.

Вот код: 

<html>
<body>

<style type="text/css">
#test table {
   border-collapse: collapse;
   table-layout: fixed;
   width: 95%;
}

#test table td {
   border: 1px solid rgb(0,0,0);
}

#test table div.scrollable {
   max-width: 100%;
   overflow: auto;
}

#test table table {
   table-layout: auto;
   width: 100%;
}
</style>

<div id="test">
<table>
<tr>
<td colspan="2">

<div class="scrollable">

<table>
<tr>
<td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td>
<td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td>
<td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td>
<td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</    td>
</tr>

</table>

</div>

</td>
</tr>
<tr><td>1</td><td>2</td></tr>
<tr><td>1</td><td>2</td></tr>
</table>
</div>
</body>
</html>

Я использовал Редактор Tryit, чтобы поиграть с этим. Заранее спасибо за помощь!

1 Ответ

4 голосов
/ 04 февраля 2009

Я не совсем уверен, чего вы пытаетесь достичь, но попробуйте это в вашем CSS: 

#test table {
   border-collapse: collapse;
   table-layout: fixed;
   width: 50%;
}

#test table td {
   border: 1px solid rgb(0,0,0);
}

#test table div.scrollable {
   max-width: 100%;
   overflow: auto;
}

#test table table {
   table-layout: auto;
   width: 100%;
}

.scrollable {
    height:40px;
    width:100%;
    overflow-x:scroll;
    overflow-y:none;

}
...