web-dev-qa-db-fra.com

Comment ajuster automatiquement la largeur de la table td à partir du contenu

Essayez d’abord de regarder ceci jsFiddle , comme vous pouvez le constater, j’ai un tableau avec beaucoup de colonnes. Mon seul problème est de savoir comment faire en sorte que tous les td ajustent sa largeur en fonction de la longueur du texte qu'il contient. envelopper 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 pourrait m'aider avec ça? Ou si cela a déjà été demandé ici s'il vous plaît montrez-moi le lien. 

htmlcsshtml5css3html-table
16
Pengun

Supprimez toutes les largeurs définies à l'aide de CSS et définissez les espaces blancs comme suit:

.content-loader tr td {
    white-space: nowrap;
}

Je voudrais également supprimer la largeur fixe du conteneur (ou ajouter overflow-x: scroll au conteneur) si vous souhaitez que les champs s'affichent dans leur intégralité sans que cela ait l'air bizarre ...

Voir plus ici: http://www.w3schools.com/cssref/pr_text_white-space.asp

25
Joshua Smickus

Utilisez cet attribut de style pour aucun habillage Word:

white-space: nowrap;
8
NerdNeo

vous pouvez également utiliser display: table au lieu de tables. Les divs sont bien plus flexibles que les tables.

Exemple:

.table {
   display: table;
   border-collapse: collapse;
}
 
.table .table-row {
   display: table-row;
}
 
.table .table-cell {
   display: table-cell;
   text-align: left;
   vertical-align: top;
   border: 1px solid black;
}
<div class="table">
	<div class="table-row">
		<div class="table-cell">test</div>
		<div class="table-cell">test1123</div>
	</div>
	<div class="table-row">
		<div class="table-cell">test</div>
		<div class="table-cell">test123</div>
	</div>
</div>

2
warch