bootstrap for tables

Using Django Templates & Frontend
1

Hi,

I have a table but i want to make the cells size fit to content. how to do that?

<style type="text/css">		
	.table tr.fit,
	.table td.fit, 
	.table th.fit {
    white-space: nowrap;
    width: 1%;
}
</style>

<table class="table table-striped table-sm">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">Loan Type</th>
      <th scope="col">Original Loan Amount</th>
      <th scope="col">Amount Left</th>
      <th scope="col">More Details</th>

    </tr>
  </thead>
  <tbody>
	{% for loan in loans %}
    <tr>
    <th scope="row">{{ forloop.counter }}</th>
      <td>{{loan.loan_type}}</td>
      <td>{{loan.original_loan_amount|intcomma}} AED</td>
      <td style= 'background-color:lightgreen'><b>{{loan.loan_amount_left|intcomma}} AED</b></td>
      <td><a class="btn btn-sm btn-info" href="{% url 'loan_details' loan.id %}">Details...</a></td>

	{% endfor %}
    </tr>
    <td colspan="3" align="right"><b>Total Amount Due:</b></td>
    <td colspan="3" align="left"><b>{{total_price1|intcomma}} AED</b></td>
  </tbody>
</table>

I still get the spaces:

Capture
Capture1905×243 25.7 KB

2

The first thing you want to do is examine your page in your browser’s developer tools to help you understand all the attributes that are being applied to each element, and to identify where those attributes are coming from.

Then, using that same tool, you can make changes right in your browser to experiment with different settings.

You may find that you might have to re-order the sequence in which your CSS files get loaded, or you may need to create a new css class, or you may need to identify a more specific selector for an element.

Bootstrap has a lot of CSS behind it, and understanding the interactions between the different selectors is quite a learning experience.

3

the class table is the one dealing with this. I had to remove it and use my own css
Capture