对齐表格中的数据答案

【问题标题】：Aligning data in a table对齐表格中的数据
【发布时间】：2012-04-25 14:20:00
【问题描述】：

在下表中，如何使用 CSS 对齐 td 单元格中的数据，以使我们不会获得水平滚动条？

另外要求是桌子的高度应该自动调整..

<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>

【问题讨论】：

标签： html css css-selectors word-wrap

【解决方案1】：

超长单元格需要word-wrap:break-word。

【讨论】：

【解决方案2】：

试试：

table {
  table-layout: fixed; 
  word-wrap: break-word; 
  width: 600px; /* or whatever you like */
}

【讨论】：

【解决方案3】：

为了支持所有浏览器去这个

.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>

【讨论】：

是的，它在 Mozila 中不支持与它一起使用尝试 white-space: pre-wrap in FF
它应该是自动换行的，这仅适用于支持 css3 的浏览器
@corroded :- & 哪些是支持 css3 的浏览器？
根据它查看答案中的链接样式表必须在 mozila 中工作