12

每次插入 loooong 评论时，如何阻止我的表格增加宽度？

我做了一个简单的例子：

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

当我增加“内容”这个词时，表格宽度正在增加..我怎样才能停止这个并插入换行符？

4

4 回答 4

16

您可以通过设置表格的宽度来做到这一点，也可以使用

word-wrap:break-word;

为了防止真长的话突破界限。

宽度最好在 css 中设置：

编辑：包括

table-layout:fixed;

演示

http://jsbin.com/atonut/1/edit

table {
width:500px;
table-layout:fixed;
}


td {
word-wrap:break-word;
}

如果您的问题是大量文本而不是令人难以置信的长单词，请仅使用宽度，并保留自动换行。希望有帮助。

于 2013-01-05T21:32:21.030 回答
8

听起来很糟糕，但你应该使用：

<tr><td><br></td></tr>
于 2019-03-22T16:28:42.500 回答
0

这是答案： 

<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>
于 2013-01-05T21:39:32.133 回答
0

添加样式： 

td
{
    border: solid 1px #000000;
    padding: 5px;
}
th
{
    border: solid 1px #000000;
    padding: 5px;
}
/* @media print
{
    table
    {
        page-break-after: always;
    }
}*/

为 tr 赋予样式：

style="page-break-inside: avoid;"
于 2013-10-17T07:11:25.080 回答