Javascript-форум (https://javascript.ru/forum/)
-   Internet Explorer (https://javascript.ru/forum/css-html-internet-explorer/)
-   -   Столбцы одинаковой ширины в IE (https://javascript.ru/forum/css-html-internet-explorer/28995-stolbcy-odinakovojj-shiriny-v-ie.html)

Gennadiy_Ch 10.06.2012 16:03

Столбцы одинаковой ширины в IE [решено]
 
Здравствуйте, подскажите пожалуйста, вопрос от новичка: есть простенькая таблица вида:

<table>
<tr><td>Ячейка 1</td><td>Ячейка 2</td><td>Ячейка 3</td></tr>
<tr><td>Ячейка 1</td><td>Ячейка 2</td><td>Ячейка 3</td></tr>
</table>


В один из столбцов пишется время (например, 00:06) - самый узкий столбец, в другой - ФИО - самый широкий. Почему при посмотре в IE8 все столбцы одинаковой ширины (видимо, с шириной столбца ФИО)? При просмотре в FireFox и IE9 ширина столбцов автоматически подстраивается под ширину значений в них. К сожалению, планируется, что в IE8 это тоже будет просматривать.

Deff 10.06.2012 16:11

Gennadiy_Ch,
задайте % ширину в каждом теге td первой строки (чтобы они в сумме составляли 100%

Тогда будет некий автоматизм и в ИЕ,

% задание ширины столбца - динамическое, он автоматом забирает у крайних при её превышении(если не сможет перенести контекст на новую строку внутри тега td

Gennadiy_Ch 10.06.2012 17:05

Спасибо:)

beard 10.06.2012 17:20

<!DOCTYPE html>
<html >
 <head>
  <meta charset="utf-8">
  <title>table-layout</title>
  <style>
   table {
    table-layout: fixed; /* Фиксированная ширина ячеек */
    width: 100%; /* Ширина таблицы */
   }
  </style>
 </head>
 <body>
  <table border="1">
   <tr> 
    <td>&nbsp;</td>
    <td>2012</td><td>2013</td><td>2014</td><td>2015</td>
    <td>2016</td><td>2017</td><td>2018</td><td>2019</td>
    <td>2020</td>
   </tr>
   <tr> 
    <td>Нефть</td><td>5</td><td>7</td><td>2</td><td>8</td>
    <td>3</td><td>34</td><td>62</td><td>74</td><td>57</td>
   </tr>
   <tr>
    <td>Золото</td><td>3</td> <td>6</td><td>4</td><td>6</td>
    <td>4</td><td>69</td><td>72</td><td>56</td><td>47</td>
   </tr>
   <tr>
    <td>Дерево</td><td>5</td><td>8</td><td>3</td><td>4</td>
    <td>7</td><td>73</td><td>79</td><td>34</td><td>86</td>
   </tr>
  </table> 
 </body>
</html>​


Часовой пояс GMT +3, время: 15:23.