将动态文本放入表格中答案

【问题标题】：Fitting dynamic text into a table将动态文本放入表格中
【发布时间】：2017-10-23 04:36:26
【问题描述】：

我在 Google 和 Stack Overflow 上找不到任何关于如何将文本放入表格以使单词进入下一行的答案。我发现几乎有用的唯一解决方案是“修复表格单元格，但文本仍然超出页面”。

当文字很短时： http://puu.sh/d4IQ2/7a7c95512c.jpg

文本过长时： http://puu.sh/d4ITM/6edb003a7c.jpg

如何使表格中的空格根据窗口大小固定，然后让太长的文本增加表格行的高度并进入下一行。

比如我的桌子是这样的：

+------+-----+-----+--------+
| 12345|12345|12345|  12345 |
|------+-----+-----+--------|
| 12345| 123 |  1  |   123  |
|------+-----+-----+--------|
|123456|12345| 123 |12345678|
|------+-----+-----+--------|
| 12345| 123 |12345|  1234  |
+-----+-----+-----+---------+

当我想要这样的时候：

+-----+-----+-----+-----+
|12345|12345|12345|12345|
|-----+-----+-----+-----|
|12345| 123 |  1  | 123 |
|-----+-----+-----+-----|
|12345|12345| 123 |12345|
|  6  |     |     | 678 |
|-----+-----+-----+-----|
|12345| 123 |12345| 1234|
+-----+-----+-----+-----+

style.css：

table, th{ border: 1px solid black; border-collapse: collapse; } th { table-layout:fixed padding: 15px; }

PHP代码太长，我不想列出所有函数，单元格中的行和文本是循环的，我从SQL数据库中获取数据：

<table style = "width = 100%">
  <tr> 
    <th> looped text </th>
  </tr>
</table>

【问题讨论】：

“最大宽度”应该可以解决问题，请在下面查看我的答案..

标签： html css html-table

【解决方案1】：

为每个td 标签设置相同的td 大小

<td width="25%">Name</td>

【讨论】：

【解决方案2】：

在 CSS 中给列指定宽度。这应该可以解决问题。

【讨论】：

【解决方案3】：

在css文件中添加这个

  td {
      width : 300px !important;
    }

【讨论】：

【解决方案4】：

将table-layout:fixed 应用于表格元素（不是th），并将word-wrap:break-word 添加到th/td's。

http://jsfiddle.net/5rz1fmvk/

【讨论】：

【解决方案5】：

好吧，我认为一个解决方案是为您的表格设置最大宽度样式。这样表格宽度不会超过给定的最大宽度，并且唯一剩下的值就是低于.

<table style="max-width: 500px; width: 500px;">
</table>

另外，指定宽度。当然样式应该在外部 css 文件中，但你明白了。希望它有所帮助。

table{
 width: 500px;
 max-width:500px
}

【讨论】：

【解决方案6】：

尝试固定 witdh 的 th 和 td 放置 css word-wrap: break-word;下面的示例。你可以改变th的宽度。

  table{
     width:100%:
    }
    th{
       width:30%;
    }
    td{
     word-wrap: break-word;
    }

【讨论】：