How to set dynamically the width of a html table column according to its text content?

Question

There is a html table :

<table width="100%" border="0" cellspacing="0" cellpadding="0">
   <tr>
      <td width="480px"  class="societe" ><div style="float:left;font-size:12px;padding-top:2px" ><?php echo $_SESSION[PROJET_REF] ?> - [<?php echo $_SESSION[MANUEL_REF] ?>]</div>
      </td>
   </tr>
   ...
</table>

The css "societe" is :

.societe{

    text-align:left;
    padding-left:23px;
    font-size:11px;
    font-weight:bold;

    background: url(../include/images/societe.png) repeat-x;

    }

In the column definition : <td width="480px" class="societe" > I hard-coded the column's width to 480px. It's not very good to do that ! So how to make the width dynamically to fit with the column's text width ? Here the text is <?php echo $_SESSION[PROJET_REF] ?> - [<?php echo $_SESSION[MANUEL_REF] ?>.

add min-width: 280px; max-width: 480px; width:auto; inside .societe — Pramendra Gupta, Jun 11 '12 at 05:47
But I don't know if the text's width can exceed 480 ! Why to set maxwidth so ? — pheromix, Jun 11 '12 at 05:50
What is “the column’s text width”? Do you meant the text content of a a cell when set on one line, or what? — Jukka K. Korpela, Jun 11 '12 at 05:51

Ashwin Krishnamurthy · Accepted Answer · 2019-11-13T16:45:29.017

6

If you want the width of your td to change dynamically according to your text, then you shouldn't give any predefined width for the td element.

In this example, you can see that the first td has a long text, So all td's within the same column will have their width set according to the longest td in the same column.

In the end, it boils down to the user experience. Would the user prefer td's with varying widths or would the user prefer td's with equal dimensions where a tool-tip would show the complete text in case it's larger in length than the width of the td. That, my friend, is a choice you'll have to make :)

edited Nov 13 '19 at 16:45

answered Jun 11 '12 at 05:54

Ashwin Krishnamurthy

3,750
3
27
49

What I prefer is the varying widths. – pheromix Jun 11 '12 at 06:09
@pheromix, yes that was just to show you the container and the table inside it. I'm merely talking about the `td` elements and their `width`. – Ashwin Krishnamurthy Jun 11 '12 at 06:29

score 2 · Answer 2 · edited Jun 19 '14 at 09:21

2

w3school Use width:auto. I've been trying to figure it out for my own purposes (with Bootstrap 3 library) and that worked for me.

edited Jun 19 '14 at 09:21

MNasir

137
7

answered Dec 22 '13 at 00:42

score 1 · Answer 3 · answered Jun 11 '12 at 05:52

so for instance you have a div

<div  id="text" style="float:left;font-size:12px;padding-top:2px" ><?php echo $_SESSION[PROJET_REF] ?> - [<?php echo $_SESSION[MANUEL_REF] ?>]</div>

you now gone get the value of characters int and depending how many there are you add a specific with

if($("#text").text().length<=100)
{
   $('.societe').attr("width", "480px");
}
if($("#text").text().length<=200)
{
   $('.societe').attr("width", "580px");
}

and so on depending on what measures you want to use

How to set dynamically the width of a html table column according to its text content?

3 Answers3