时间戳

首页 > 解决方案 > 如何使表格单元格的宽度适应其内容？

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

问题描述

如标题所述，我将 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>宽度，但我没有成功地使宽度适应长度内容。

我想从中吸取教训，所以，如果可能的话，向我解释我在这里做错了什么，或者我的方法是否缺乏洞察力。

标签： htmlcsshtml-table

解决方案

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

我建议使用 a<style>来定义一次，如下所示：

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

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

推荐阅读