如何使表格单元格的宽度适应其内容？

Question

按照标题中的要求，我将sql查询结果显示到html表中。但是，当内容长度较长时，读取整个字符串很麻烦。 这就是我得到的：

您可以看到，就像在第一行的第一行中一样，内容的长度比单元格的长度还要长，而我一眼看不到内容。 我希望单元格的长度尽可能长。

每个单元格中都有一个<input>标签，因为我想直接从此处修改数据并使用onChange事件来触发更新查询。

我这样生成表：

        $texte = "<table class='table table-bordered table-sm' ><thead>$table_header</thead>";
        $texte .= "<tbody>";

        $nb_ligne ="Nombre de lignes : ".pg_num_rows($result);

        while($row = pg_fetch_row($result)){
            $texte .= "<tr>";
            foreach ($row as $value){
                $texte .= "<td><input class='form-control' value='$value' onchange=''></td>";
            }
            $texte .= "</tr>";
        }
        $texte .= "</tbody></table>";

$table_header在上面的switch{} case'':中定义，其中取决于哪种情况是不同的字符串。例子：

switch ($query){
            case 'Aiguillage_Etat':
                $requete = "select projet.projet_nom, aiguilalge.aig_etat from projet inner join aiguillage on aiguillage.aig_id = projet.projet_id where aiguillage.aig_etat $filtre;";
                $table_header = "<th>Nom projet</th><th>Etat aiguillage</th>";
                break;
}

然后我使用AJAX更改<div>的内容，在其中显示我的表格：

<div id="tableau_resultat"></div>

我尝试操纵<th>的宽度，但没有成功使宽度适应长度内容。

我想从中学到东西，所以，如有可能，请向我解释我在这里做错了什么，或者我的方法缺乏见识。

Answer 1

问题出在$table_header（您忽略了显示）中的任何内容上。您需要将CSS white-space: nowrap 应用于其中的<td>或<th>元素。

我建议使用<style>对其进行一次定义，如下所示：

<style type="text/css">
    .table-sm > thead > tr > th { white-space: nowrap; }
</style>

否则，您将需要为内部<td>或<th>每个元素应用内联样式。