Pengun Pengun - 1 month ago 6
HTML Question

how to auto adjust table td width from the content

First please try to look at this jsFiddle, as you can see I have a table with lots of columns my only problem is how can i make all the

td
adjust its width depending on how long is the text inside of it without wrapping the words?

Here is my HTML code:

<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>


And here is my CSS code:

.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 {

}


Can someone please help me with this? Or if it's already been asked here please show me the link. Thanks for the help.

Answer

Remove all widths set using CSS and set white-space to nowrap like so:

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

I would also remove the fixed width from the container (or add overflow-x: scroll to the container) if you want the fields to display in their entirety without it looking odd...

See more here: http://www.w3schools.com/cssref/pr_text_white-space.asp

Comments