Html html表格中的换行符
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14176554/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Line breaks in html table
提问by Ion Farima
How can I stop my table from increasing width every time I insert loooong commentary?
每次插入 loooong 评论时，如何阻止我的表格增加宽度？
I made a simple example :
我做了一个简单的例子：
<!DOCTYPE html>
<html>
<body>
<table width='350' border="0" align="center" cellpadding="3" cellspacing="1" class="table">
<tr>
<th id="row_style" bgcolor='#D6D6D6'>ID</th>
<th id="row_style" width= "50%" bgcolor='#D6D6D6'>Content</th>
<th id="row_style" bgcolor='#D6D6D6'>Date</th>
</tr>
<tr>
<td id="row_style" bgcolor='#3399FF' scope='col' width='50'>Example</td>td>
<td id="row_style" width ='10%'> Content</td>td>
<td id="row_style" bgcolor='#3399FF' scope='col' width ='10%'>Example</td>td>
<td width ='10%'></td>
</tr>
</table>
</body>
</html>
When I increase the word "content" the table width is increasing.. how can I stop this and insert a line break?
当我增加“内容”一词时，表格宽度会增加..如何停止并插入换行符？
回答by user1721135
You can do this by setting a width for the table and you could also use
您可以通过设置表格的宽度来做到这一点，您也可以使用
word-wrap:break-word;
In order to prevent really long words to break out of boundaries.
为了防止真长的话越界。
Width is best set in css:
宽度最好在 css 中设置：
Edit: include
编辑：包括
table-layout:fixed;
Demo
演示
http://jsbin.com/atonut/1/edit
http://jsbin.com/atonut/1/edit
table {
width:500px;
table-layout:fixed;
}
td {
word-wrap:break-word;
}
If your problem is a lot of text rather then incredibly long words, only use width, and leave the word-wrap out. Hope that helps.
如果您的问题是大量文本而不是令人难以置信的长单词，请仅使用宽度，而不要使用自动换行。希望有帮助。
回答by daniel assayag
Sounds terrible but you should use:
听起来很糟糕，但你应该使用：
<tr><td><br></td></tr>
回答by user1942990
Here is the answer :
这是答案：
<table width='350' border="0" align="center" cellpadding="3" cellspacing="1" class="table">
<tr>
<th id="row_style" bgcolor='#D6D6D6'>ID</th>
<th id="row_style" width= "10%" bgcolor='#D6D6D6'>Content</th>
<th id="row_style" bgcolor='#D6D6D6'>Date</th>
</tr>
<tr>
<td id="row_style" bgcolor='#3399FF' scope='col' width='10%'>Example</td>
<td id="row_style" width ='10%'> Contentd</td>
<td id="row_style" bgcolor='#3399FF' scope='col' width ='10%'>Example</td>
<td width ='10%'>
</body>
</html>
回答by Riddhi
Add style:
添加样式：
td
{
border: solid 1px #000000;
padding: 5px;
}
th
{
border: solid 1px #000000;
padding: 5px;
}
/* @media print
{
table
{
page-break-after: always;
}
}*/
Give style to tr:
给 tr 样式：
style="page-break-inside: avoid;"
