How to adapt the width of a table cell to its content?

Question

As asked in the title, I am displaying sql query result into an html table. However when the content has a long length, it is tedious to read the whole string. This is what I get :

You can see, like in the first col, first row, the content is longer then the cell length, and I unable to read on first sight the content. I'd like the cell to be as long as the content lenght.

There is an <input> tag in each cells, as I want to modify data directly from here and use onChange event to trigger update query.

I generate my table like this :

        $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 is define above, in a switch{} case'': where depending on which case is a different string. Exemple :

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

And I use AJAX to change <div> content, where my table is displayed :

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

I tried to manipulate <th> width but I did not succeed to adapt the width to length content.

I want to learn from this, so, if possible, explain to me what I'm doing wrong here, or if my approach is lacking insight.

One thing to note here is that you are creating multiple td elements with the same id. This is not valid html. Considering using class if you want them all tagged the same. — hawkstrider, Jul 22 '19 at 14:56
@bhmahler You are right. The `id` in `` are not revelent actually, it was just for a test. — LyessD, Jul 22 '19 at 14:59
Try to put `word-break: break-all;` to all your desired cell (`TD` or `TH`), this will prevent long text to overflow its cell but I'm not sure if that's what you're asking for though. — tcj, Jul 22 '19 at 15:00
@tcj it is not really the behavior I am looking for. Rather than break string to fit cells width I'd like cells to fit contents length. Is my problem description not revelent ? (or it was a suggestion to work on ?) — LyessD, Jul 22 '19 at 15:08
A table cell automatically adapts to its content's length, it is its default behavior, that's why I thought you rather meant to fit the text in its cell so it doesn't overflow. Could you provide a reproducible example of your issue (e.g. copy/paste the HTML of the table)? — tcj, Jul 22 '19 at 15:14
Is your problem that the table cell is expanding vertically to fit the text, but you want it to expand horizontally? So you want the row to be shorter, and the user will have to scroll right to see the rest of the text? — Rory O'Kane, Jul 22 '19 at 15:15
@tcj I edited my post with a photo showing the issue I get. It may be more revelent. By the way, I may use `word-break` function for headers to keep them on 1 line. — LyessD, Jul 23 '19 at 08:01
@RoryO'Kane Well not really. I haven't explained my problem correctly I guess. I edited my post showing a photo of the issue I get. The cells are not long enough to display the whole content. — LyessD, Jul 23 '19 at 08:02
You're using ``-tags. They have a default size of 20 characters, if you want to adjust the width of your table columns, you'll need to adjust the `size`-attribute of the ``-tags. eg. `` — Trickytree22, Jul 23 '19 at 08:09
@Trickytree22 I tried using like this : `$texte .= "";` but it do not change anything. Am I doing it the wrong way ? — LyessD, Jul 23 '19 at 10:18
Do you have a style with specified widths for the input-tags? Because that would override any value for size. — Trickytree22, Jul 23 '19 at 11:16

Peter B · Answer 1 · 2019-07-23T08:16:58.547

1

The problem lies in whatever is in $table_header (which you neglected to show). You need to apply CSS white-space: nowrap to the <td> or <th> elements in that.

I recommend using a <style> to define it once, something like this:

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

or else you will need to apply inline styles for every one of the inner <td> or <th> elements.

edited Jul 23 '19 at 08:16

answered Jul 23 '19 at 08:07

Peter B

22,460
5
32
69

You're right, I'm gonna to edit my post and talk about it. However `$table_header` is a string I define in a `switch{} case'':` as each blue button call a different select query in a get query. – LyessD Jul 23 '19 at 10:04
I tried to use your solution. It works for the headers, but not for cells : `` There is something I don't get, is the input in a cell causing this ? – LyessD Jul 23 '19 at 10:05
1

There is no way to tell `` elements to grow according to what is inside them. If that is what you need, then you need to write code that estimates/calculates what the pixel width would have to be, and then set each `` to that width + probably a bit extra for padding. Another way could be using "editable spans" [like this](https://stackoverflow.com/a/7168929/1220550) but those don't post their data during form submit, which would probably mean lots of other big changes. – Peter B Jul 23 '19 at 10:32

How to adapt the width of a table cell to its content?

1 Answers1