Comment ajuster automatiquement la table td largeur du contenu
Abord s'il vous plaît, essayez de regarder cette jsFiddle, comme vous pouvez le voir j'ai une table avec beaucoup de colonnes, mon seul problème est de savoir comment puis-je faire tous les td
ajuster sa largeur en fonction de combien de temps est le texte à l'intérieur de celui-ci sans emballage les mots?
Voici mon code HTML:
<div class="content">
<div class="content-header">
</div>
<div class="content-loader">
<table>
<tbody>
<tr>
<td>First Name</td>
<td>Last Name</td>
<td>Gender</td>
<td>Birth Date</td>
<td>Address</td>
<td>Zip Code</td>
<td>Nationality</td>
<td>Contact Number</td>
<td>Email</td>
<td>Username</td>
<td>Course</td>
<td>Year</td>
<td>ID Number</td>
<td>Subjects</td>
<td>Other Fields</td>
<td>Other Fields</td>
<td>Other Fields</td>
<td>Other Fields</td>
<td>Other Fields</td>
<td>Other Fields</td>
</tr>
</tbody>
</table>
</div>
</div>
Et voici mon code CSS:
.content {
width: 1100px;
height: 200px;
background: #fdfdfd;
margin: 0px auto;
position: relative;
top: 40px;
border: 1px solid #aaaaaa;
}
.content .content-header {
width: 100%;
height: 40px;
background-color:#aaa;
background-image:-moz-linear-gradient(top,#eeeeee,#cccccc);
background-image:-webkit-gradient(linear,0 0,0 100%,from(#eeeeee),to(#cccccc));
background-image:-webkit-linear-gradient(top,#eeeeee,#cccccc);
background-image:-o-linear-gradient(top,#eeeeee,#cccccc);
background-image:linear-gradient(to bottom,#eeeeee,#cccccc);
border-bottom: 1px solid #aaaaaa;
}
.content-loader {
overflow: scroll;
}
.content-loader table {
width: auto;
background: #aaa;
}
.content-loader table tr {
background: #eee;
}
.content-loader table tr td {
}
Quelqu'un peut m'aider avec ça? Ou si ça a déjà été demandé ici s'il vous plaît me montrer le lien.
supprimer toutes les largeurs et les ajouter .contenu-chargeur de table tr td { white-space: nowrap; } ?
Puisque vous avez une largeur fixe pour le conteneur, vous avez trop de champs à l'intérieur pour s'adapter correctement. Si vous avez eu moins, elle aurait probablement ajusté sur son propre.
Puisque vous avez une largeur fixe pour le conteneur, vous avez trop de champs à l'intérieur pour s'adapter correctement. Si vous avez eu moins, elle aurait probablement ajusté sur son propre.
OriginalL'auteur Pengun | 2014-02-07
Vous devez vous connecter pour publier un commentaire.
Supprimer toutes les largeurs définies à l'aide de CSS et de définir un espace blanc à nowrap comme suit:
Je voudrais aussi supprimer le fixe la largeur de la cuve (ou ajouter
overflow-x: scroll
pour le conteneur) si vous voulez des champs à afficher dans leur intégralité sans regarder bizarre...Voir plus ici: http://www.w3schools.com/cssref/pr_text_white-space.asp
OriginalL'auteur Joshua Smickus
Utiliser cet attribut style pour pas de mot d'emballage:
OriginalL'auteur NerdNeo