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

Question

I find some posts in Stack Overflow but it doesn't work for me. I need some specific help.
This is my board page :
When I type long title post, it looks like this :
As you can see here, it ruins each table cell's width, as well as text not being truncated.\
What I want to do :
If text reaches the end of title field, it should be truncated
Anything should not ruin the table format (width..etc)
Here is my 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>
{% for post in posts %}
<tr>
<td class="td-title-area"> {{ post.title}} </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 %}
previous
{% endif %}
<span class="page-current">
Page {{ page_obj.number }} of {{ page_obj.paginator.num_pages }}.
</span>
{% if page_obj.has_next %}
next
{% endif %}
</span>
</div>
{% endif %}
</div>
{% endblock %}
Need your helps. Thanks
Edit
Here is what I'm trying to do :
1. I made class named truncate and define css for it :
.truncate {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
And add truncate class to my table :
<tbody>
{% for 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 is :

Answer 1

You could try something like this:
.td-title-area {
position: relative;
}
.td-title-area a {
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"> sdkjghbdslkjgbshdfjgbsdfjkhgbsdfjkghbsdgsdfhjkgbsdfkjhgbsdfkhjgbsdfkjghbsfdkjhg </td>
<td> author </td>
<td> date </td>
<td> 11 </td>
</tr>
<tr>
<td class="td-title-area"> sdkjg </td>
<td> author </td>
<td> date </td>
<td> 11 </td>
</tr>
</tbody>
</table>