css - HTML table truncate text but fit as much as possible -

i find posts in stack overflow doesn't work me. need specific help.

this board page :

when type long title post, looks :

as can see here, ruins each table cell's width, text not being truncated.\

what want :

1. if text reaches end of title field, should truncated
2. anything should not ruin table format (width..etc)

here html code (used in django):

{% extends 'chacha_dabang/skeleton/base.html' %}  {% block content %}     <div class="container inner">         <div class="row">             <div class="col-md-8 col-sm-9 center-block text-center">                 <header>                     <h1> 차차다방 게시판 </h1>                     <p> 회원들의 게시글을 볼 수 있는 페이지 입니다.</p>                 </header>             </div><!-- /.col -->         </div><!-- /.row -->     </div><!-- /.container -->      <div class="container inner-bottom">         <div class="table-responsive">             <table class="table">                 <col width="65%">                 <col width="15%">                 <col width="13%">                 <col width="7%">                 <thead>                     <tr>                         <th>제 목</th>                         <th>작성자</th>                         <th>작성일</th>                         <th>조회수</th>                     </tr>                 </thead>                 <tbody>                     {% post in posts %}                     <tr>                         <td class="td-title-area"> <a href="{{ post.get_absolute_url }}" class="td-title"> {{ post.title}} </a></td>                         <td> {{post.author}} </td>                         <td> {{post.created_at|date:"short_date_format"}} </td>                         <td> 11 </td>                     </tr>                     {% endfor%}               </tbody>             </table>         </div>          <br>         <br>          {% if is_paginated %}         <div class="pagination text-center" style="position:center;">             <span class="page-links">                 {% if page_obj.has_previous %}                     <a href="{% url 'posts:list' %}?page={{ page_obj.previous_page_number }}">previous</a>                 {% endif %}                 <span class="page-current">                     page {{ page_obj.number }} of {{ page_obj.paginator.num_pages }}.                 </span>                 {% if page_obj.has_next %}                     <a href="{% url 'posts:list' %}?page={{ page_obj.next_page_number }}">next</a>                 {% endif %}             </span>         </div>         {% endif %}     </div>  {% endblock %} 

need helps.

edit

here i'm trying : 1. made class named truncate , define css :

.truncate {   white-space: nowrap;   overflow: hidden;   text-overflow: ellipsis; } 

and add truncate class table :

<tbody>     {% post in posts %}     <tr>         <td class="td-title-area">             <a href="{{ post.get_absolute_url }}" class="td-title truncate">                    {{ post.title}}             </a>         </td>         <td> {{post.author}} </td>         <td> {{post.created_at|date:"short_date_format"}} </td>         <td> 11 </td>     </tr>     {% endfor%} </tbody> 

and result :

you try this:

    .td-title-area {        position: relative;      }        .td-title-area {        position: absolute;        left: 0;        right: 0;        top: 0;        bottom: 0;        white-space: nowrap;        overflow: hidden;        text-overflow: ellipsis;      }

<table class="table">                  <col width="65%">                  <col width="15%">                  <col width="13%">                  <col width="7%">                  <thead>                      <tr>                          <th>제 목</th>                          <th>작성자</th>                          <th>작성일</th>                          <th>조회수</th>                      </tr>                  </thead>                  <tbody>                      <tr>                          <td class="td-title-area"> <a href="" class="td-title"> sdkjghbdslkjgbshdfjgbsdfjkhgbsdfjkghbsdgsdfhjkgbsdfkjhgbsdfkhjgbsdfkjghbsfdkjhg </a></td>                          <td> author </td>                          <td> date </td>                          <td> 11 </td>                      </tr>                    <tr>                          <td class="td-title-area"> <a href="" class="td-title"> sdkjg </a></td>                          <td> author </td>                          <td> date </td>                          <td> 11 </td>                      </tr>                    </tbody>                  </table>