CODEWITHSUNDEEP
htmlcsshtml-table
Pengun
Pengun

Reputation: 744

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

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

Upvotes: 26

Views: 168630

Answers (3)

warch
warch

Reputation: 2609

you could also use display: table insted of tables. Divs are way more flexible than tables.

Example:

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

Upvotes: 4

NerdNeo
NerdNeo

Reputation: 319

Use this style attribute for no word wrapping:

white-space: nowrap;

Upvotes: 10

user632287
user632287

Reputation:

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

Upvotes: 41

Related Questions