Таблица не будет переполняться

Question

У меня есть таблица с переменным числом столбцов, которую я хочу разместить в фиксированной ширине div.

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

Однако таблица, по-видимому, изменяет размер, чтобы соответствовать внутри div.

<style> 
table,td{ 
    border:1px solid black; 
} 
</style> 
<div style="overflow:auto;width:500px;border: 1px solid red"> 

<table> 
<tr> 
    <td style="width:100px">a</td> 
    <td style="width:100px">a</td> 
    <td style="width:100px">a</td> 
    <td style="width:100px">a</td> 
    <td style="width:100px">a</td> 
    <td style="width:100px">a</td> 
    <td style="width:100px">a</td> 
</tr> 
</table> 

</div> 

Я могу взломать это, установив таблицу на фиксированную ширину больше, чем div. Но таблица имеет переменное количество столбцов, поэтому я бы предпочел не делать этого.

Есть ли лучший способ?

Спасибо за любые предложения.

Answer 1

Вы должны установить явную ширину в таблице (для этого, конечно, используйте CSS). Предположительно, если столбцы генерируются динамически, было бы слишком сложно вычислять ширину динамически. Вам придется использовать встроенный CSS, но, ну, это правильный случай.

Answer 2

Вы можете использовать

<table> 
<tr> 
    <td style="min-width:100px;max-width:100px">a</td> 
    <td style="min-width:100px;max-width:100px">a</td> 
    <td style="min-width:100px;max-width:100px">a</td> 
    <td style="min-width:100px;max-width:100px">a</td> 
    <td style="min-width:100px;max-width:100px">a</td> 
    <td style="min-width:100px;max-width:100px">a</td> 
    <td style="min-width:100px;max-width:100px">a</td> 
</tr> 
</table> 

Но я мог бы иметь проблемы для IE < 8.