Question

每次插入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>

当我增加单词“content”时，表格宽度正在增加..如何停止此操作并插入换行符？

Answer 1

您可以通过设置表格的宽度来执行此操作，也可以使用

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

如果你的问题是大量的文字，而不是长得令人难以置信的话，只能使用宽度，并留下自动换行。希望有所帮助。

Answer 2

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

const objList = [{
    vote_average: 1221,
    file_path: 'dsf'
  },
  {
    vote_average: 100,
    file_path: 'asdf'
  },
  {
    vote_average: 32,
    file_path: 'hgk'
  },
    {
    vote_average: 1,
    file_path: 'hgk'
  }
]

console.log(objList)

objList.sort(function(a, b) {
  return b.vote_average - a.vote_average
})

console.log(objList.slice(0,3))

Answer 3

以下是答案：

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

Answer 4

添加样式

 

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

html表中的换行符

4 个答案: