1- I need help fixing the width of my table so that it stays within the screen. 2- Is there a way to display only the first 100 characters of table data and show the rest when clicked?
Any assistance would be greatly appreciated.
Here is a snippet from my HTML file:
<div class="row">
<div class="col-md-12 col-lg-12 col-sm-12">
<div class="white-box">
<h3 class="box-title">Business Opportunities</h3>
<a href="/update" class="btn btn-info" style="float: right; margin-top: -45px; margin-right: 100px;">Update</a>
<a href="/logout" class="btn btn-warning" style="float: right; margin-top: -45px" onclick="return confirm('Are you sure you want to logout?')">Logout</a>
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th>#</th>
<th>Website</th>
<th></th>
<th>Title</th>
<th>Description</th>
<th>Organization</th>
<th>Close Date</th>
<th>Weeks Left</th>
<th>Downloads</th>
<th>Import Date</th>
<th>Operation</th>
</tr>
</thead>
<tbody>
{% for row in output %}
<tr>
<td>{{ loop.index }}</td>
<td>{{ row.website }}</td>
<td><a href="{{row.op_link}}" target="blank"><i class="fa fa-link"></i></a></td>
<td>{{ row.title }}</td>
<td>{{ row.description }}</td>
<td>{{ row.organization }}</td>
<td>{{ row.close_date }}</td>
<td>{{ row.weeks_left }}</td>
<td>
{% for link in row.downloads %}
{% if link != '' %}
<a href="{{ link }}">[{{ loop.index }}]</a>
{% else %}
<p>N/A</p>
{% endif %}
{% endfor %}
</td>
<td>{{ row.created_at }}</td>
<td>
# some other codes
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
</div>