Выравнивание данных в таблице - PullRequest
1 голос
/ 17 июня 2010

В следующей таблице, как мне выровнять данные в ячейках td так, чтобы мы не получали горизонтальную полосу прокрутки, используя CSS?

Также необходимо, чтобы высота стола регулировалась автоматически.

<table> 
   <tr><th>name</th>
   <th>info</th></tr>
   <tr><td>Harry</td>
     <td>suminfosuminfosuminfosuminfosum infosuminfosuminfosuminfosuminfosuminfosuminfosuminfosuminfosuminfosuminfosuminfosuminfos uminfosuminfosuminfosuminfosuminfosuminfosuminfosuminfosuminfosuminfosuminfosuminfosuminfosuminfosuminfosuminfosuminfosuminfosuminfosuminfosuminfosuminfosuminfosuminfosuminfosuminfosuminfosuminfosuminfosuminfosuminfosuminfosuminfosuminfosuminfosuminfosuminfosuminfosuminfosuminfosuminfosuminfosuminfosuminfosuminfosuminfosuminfosuminfosuminfosuminfosuminfosuminfosuminfosuminfosuminfo<td></tr>
   <tr><td>test</td><td>test data</td></tr>
</table>

Ответы [ 3 ]

0 голосов
/ 17 июня 2010

Требуется сверхдлинная клетка word-wrap:break-word.

0 голосов
/ 17 июня 2010

Попробуйте:

table {
  table-layout: fixed; 
  word-wrap: break-word; 
  width: 600px; /* or whatever you like */
}
0 голосов
/ 17 июня 2010

Для поддержки всех браузеров перейдите на этот

.workbreak {
      word-wrap: break-word;      /* IE 5.5-7 */
      white-space: -moz-pre-wrap; /* Firefox 1.0-2.0 */
      white-space: pre-wrap;      /* current browsers */
}

<table> 
   <tr><th>name</th>
   <th>info</th></tr>
   <tr><td>Harry</td>
     <td class="workbreak">suminfosuminfosuminfosuminfosuminfosuminfosuminfosuminfosuminfosuminfosuminfosuminfosuminfosuminfosuminfosuminfosuminfosuminfosuminfosuminfosuminfosuminfosuminfosuminfosuminfosuminfosuminfosuminfosuminfosuminfosuminfosuminfosuminfosuminfosuminfosuminfosuminfosuminfosuminfosuminfosuminfosuminfosuminfosuminfosuminfosuminfosuminfosuminfosuminfosuminfosuminfosuminfosuminfosuminfosuminfosuminfosuminfosuminfosuminfosuminfosuminfosuminfosuminfosuminfosuminfosuminfosuminfosuminfosuminfosuminfosuminfosuminfo<td></tr>
   <tr><td>test</td><td>test data</td></tr>
</table>

Для более подробной информации: https://developer.mozilla.org/en/CSS/white-space

...