Wie setzen dynamisch die Breite der html-Tabelle-Spalte nach text-Inhalten?

Es ist ein 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>

Den css "societe" ist :

.societe{

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

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

    }

In der column definition : <td width="480px" class="societe" > ich hart codiert die Spalte die Breite auf 480px. Es ist nicht sehr gut zu tun ! So, wie die Breite dynamisch zu passen, mit der Spalte der Breite des Textes ? Der text ist hier <?php echo $_SESSION[PROJET_REF] ?> - [<?php echo $_SESSION[MANUEL_REF] ?>.

sind Sie offen für javascript jquery
wie dies mit jquery ?
hinzufügen, min-width: 280px; max-width: 480px; width:auto; von innen .societe
Aber ich weiß nicht, ob der text die Breite überschreitet 480 ! Warum setzen maxwidth so ?
Was ist "die Spalte text Breite"? Sie bedeutete, dass der text-Inhalt einer Zelle, wenn Sie auf eine Zeile, oder was?

InformationsquelleAutor pheromix | 2012-06-11

  1. 4

    Wenn Sie möchten, dass die Breite Ihrer td dynamisch zu ändern, nach deinen text, dann sollten Sie nicht geben keine vordefinierten Breite für das td element.

    In diese Beispiel können Sie sehen, dass die ersten td hat einen langen text, So dass alle td's in der gleichen Spalte Ihre Breite richtet sich nach der längsten td in der gleichen Spalte.

    In das Ende, es läuft darauf hinaus, die user-experience. Würden die user lieber td's mit unterschiedlicher Breite oder würden die user lieber td's mit gleichen Dimensionen, in denen ein tool-Tipp, die zeigen würde, den kompletten text incase seiner langen und seine überflogen. Das, mein Freund, ist eine Wahl, die Sie treffen müssen 🙂

    Was ich bevorzuge, ist die unterschiedliche breiten.
    Sie hart codierte Breite im div : width : 300px !
    ja, das war nur um zu zeigen Sie den Behälter und die Tabelle drin. Ich bin mir nur zu sagen, was td Elemente und Ihre width.

    InformationsquelleAutor Ashwin Krishnamurthy

  2. 1

    also zum Beispiel ein div - 

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

    du jetzt gegangen, um den Wert von Zeichen int und je nachdem, wie viele es sind, fügen Sie ein spezifisches mit 

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

    und so weiter, je nachdem, welche Maßnahmen Sie verwenden möchten

    InformationsquelleAutor COLD TOLD

  3. 0

    w3school
    Verwenden width:auto. Ich habe versucht, um es herauszufinden, für meine eigenen Zwecke (mit Bootstrap 3-Bibliothek) und das funktionierte für mich.

    InformationsquelleAutor jasonszhao

Schreibe einen Kommentar