Aligning data in a table
In the following table, how do I align the data in td
cells such that we do 开发者_Python百科not get a horizontal scroll bar, using CSS?
Also the requirement is that the height of the table should be adjusted automatically..
<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>
The extra long cell needs word-wrap:break-word
.
Try:
table {
table-layout: fixed;
word-wrap: break-word;
width: 600px; /* or whatever you like */
}
To support all browser go for this
.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>
For more detail : https://developer.mozilla.org/en/CSS/white-space
精彩评论