Comment pad contenu cellulaire au centre <td>

Question

Si j'ai un texte de longueur fixe alors je peux facilement centrer par exemple

Cependant, permet de dire qu'il ya des données de longueur variable,

Le centrage du contenu de Pseudo affectera la lisibilité.

Y a-t-il un moyen de remplir le contenu et de le centrer sur la plus grande longueur?

<td> 
    <div style="padding-left: 30%;"> 
     ...content 
    </div> 
</td> 

La valeur "30%" correspond simplement à une estimation approximative pour un pseudonyme.

Toutefois, ce 30 pour cent sera changé si la colonne attend des données plus. Quel est un bon moyen de déterminer par programme cette valeur que je mets en "30"?

Mise à jour, centrer le texte n'est pas ce que je cherche. Je veux centrer le texte et aligner à gauche, le texte de centrage seul me donnera

Représentation visuelle de ce que je veux

Answer 1

vous pouvez essayer en mentionnant pixels taille

<td> 
    <div style="padding-left: 30px;"> 
     ...content 
    </div> 
</td> 

Answer 2

Mettre à jour

Techniquement, cette réponse est correcte, mais nous sommes incapables de le voir visuellement si selon moi la meilleure façon de le faire est d'ajouter même rembourrage gauche et à droite à la fois <th> et <td> et enlever text-align:center de <th>. C'est juste mon opinion. Nous attendrons et verrons ce que les autres en pensent. :)

---

Au lieu d'ajouter un rembourrage d'un côté, vous devez ajouter les deux côtés.

table tr td{ 
     padding:5px 15%; 
} 

J'ai créé un exemple simple.

table{ 
 
    width:200px; 
 
} 
 

 
table tr th{ 
 
    background:#ccc; 
 
    text-align:left; 
 
    padding:5px 15%; 
 
} 
 

 
table tr td{ 
 
    padding:5px 15%; 
 
    background:#eee; 
 
}

<table> 
 
<tr> 
 
    <th>Nickname</th> 
 
</tr> 
 

 
<tr> 
 
    <td>One</td> 
 
</tr> 
 
<tr> 
 
    <td>Big Name</td> 
 
</tr> 
 
<tr> 
 
    <td>A Very Big Name</td> 
 
</tr> 
 

 
<tr> 
 
    <td>This is a very big name</td> 
 
</tr> 
 
</table>

Answer 3

Essayez ceci,

td{ 
    padding:5px; 
    text-align:center; 
} 

Answer 4

afin de les adapter, vous devez utiliser bootstrap 3

essayer vous aurez certainement votre réponse bootstrap tables

et là des cours

<tr class="something"> 
    <td class="col-md-2">A</td> 
    <td class="col-md-3">B</td> 
    <td class="col-md-6">C</td> 
    <td class="col-md-1">D</td> 
</tr> 

Answer 5

Vous devez javascript pour déterminer la largeur du contenu et de la largeur de données de table.

var td = document.querySelectorAll('td > div'); 
 
    var width = 0; 
 
    var clientWidth = 0; 
 
    // determine the width 
 
    [].forEach.call(td, function(e) { 
 
     clientWidth = e.parentNode.clientWidth; // the width is the same for all td's 
 
     if (e.clientWidth > width) { 
 
     width = e.clientWidth; 
 
     } 
 
    }); 
 
    // set the padding 
 
    [].forEach.call(td, function(e) { 
 
     e.style.paddingLeft = (clientWidth - width)/2 + 'px'; 
 
     e.style.paddingRight = (clientWidth - width)/2 + 'px'; 
 
    });

table { 
 
     border-collapse: collapse;  
 
    } 
 
    th { 
 
     text-align: center; 
 
    } 
 
    th, td { 
 
     border: 1px solid #000; 
 
    } 
 
    td > div { 
 
     display: inline-block; /* set this because we want to calculate the width, block element has 100% */ 
 
     padding: 10px 0; 
 
    }

<table style="width: 50%"> 
 
    <tr> 
 
     <th>Nickname</th> 
 
    </tr> 
 
    <tr> 
 
     <td><div>Data 1 Data 1Data 1Data 1</div></td> 
 
    </tr> 
 
    <tr> 
 
     <td><div>Data 2</div></td> 
 
    </tr> 
 
    <tr> 
 
     <td><div>Data 3</div></td> 
 
    </tr> 
 
    <tr> 
 
     <td><div>Data 4</div></td> 
 
    </tr> 
 
    <tr> 
 
     <td><div>Data 5</div></td> 
 
    </tr> 
 
    <tr> 
 
     <td><div>Data 6</div></td> 
 
    </tr> 
 
    <tr> 
 
     <td><div>Data 7</div></td> 
 
    </tr> 
 
    <tr> 
 
     <td><div>Data 8</div></td> 
 
    </tr> 
 
    </table>

Modifier la largeur du tableau hardcoded pour voir l'effet.