Resize Tables with css

Question

3v and Django 5.1 for my Forms

I created a file css but I don't know how to use it, my CSS is still empty.

settings.py enter image description here

tipomaterial.html

{% extends 'base.html' %}


{% block content %}


<main class="container py-5">
            <table class="table table-bordered">
                <thead>
                    <tr>
                        <th style="text-align: center;">
                            <strong>
                                <h2>Tipo de Material</h2>
                            </strong>
                        </th>
                        <th>
                            <a class="btn btn-success" role="button" href="{% url 'creartipomaterial' %}">
                                <i class="bi bi-plus-square-fill"> 
                                    Agregar 
                                </i>          
                            </a>
                        </th>
                    </tr>
                    <tr style="text-align: center;">
                        <th scope="col">Nombre del material</th>
                        <th scope="col" colspan="2">Acciones</th>
                    </tr>
                </thead>
                <tbody class="table-group-divider">
                    {% for datos in tipomaterial %}
                    <tr>    
                        <td>
                            <li class="list-group-item" href="{% url 'detalle_tipomaterial' datos.id %}">               
                                <strong>{{datos.nombre}}</strong>              
                            </li>
                        </td>
                        <td>                   
                            <a class="btn btn-primary" href="{% url 'detalle_tipomaterial' datos.id %}" role="button">        
                                <i class="bi bi-pencil-fill">
                                    Editar
                                </i>       
                            </a>  
                            <a class="btn btn-danger" href="{% url 'eliminar_tipomaterial' datos.id %}" role="button">
                                <i class="bi bi-trash3-fill">
                                    Eliminar
                                </i>              
                            </a>       
                        </td>
                    </tr>
                    {% endfor%}
                </tbody>    
            </table>
</main>


{% endblock %}    

design enter image description here

I wish my table was smaller.

Any idea please

Answer 1

You can start with changing your table tag to

<table class="table table-bordered table-responsive">

and it will right-size the table for you... if you have a specific table size in mind, you can refer to the documentation and check what you might need from there: https://getbootstrap.com/docs/4.0/content/tables/

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">

<main class="container py-5">
  
    <table class="table table-bordered table-responsive">
      <thead>
        <tr>
          <th style="text-align: center;">
            <strong><h2>Tipo de Material</h2></strong>
          </th>
          <th>
            <a class="btn btn-success" role="button" href="{% url 'creartipomaterial' %}">
              <i class="bi bi-plus-square-fill"> 
                  Agregar 
              </i>          
          </a>
          </th>
        </tr>
        <tr style="text-align: center;">
          <th scope="col">Nombre del material</th>
          <th scope="col" colspan="2">Acciones</th>
        </tr>
      </thead>
      <tbody class="table-group-divider">
        <tr>
          <td>
            <li class="list-group-item" href="{% url 'detalle_tipomaterial' datos.id %}">
              <strong>nombre1</strong>
            </li>
          </td>
          <td>
            <a class="btn btn-primary" href="{% url 'detalle_tipomaterial' datos.id %}" role="button">
                                <i class="bi bi-pencil-fill">
                                    Editar
                                </i>       
                            </a>
            <a class="btn btn-danger" href="{% url 'eliminar_tipomaterial' datos.id %}" role="button">
                                <i class="bi bi-trash3-fill">
                                    Eliminar
                                </i>              
                            </a>
          </td>
        </tr>

        <tr>
          <td>
            <li class="list-group-item" href="{% url 'detalle_tipomaterial' datos.id %}">
              <strong>nombre2</strong>
            </li>
          </td>
          <td>
            <a class="btn btn-primary" href="{% url 'detalle_tipomaterial' datos.id %}" role="button">
                                <i class="bi bi-pencil-fill">
                                    Editar
                                </i>       
                            </a>
            <a class="btn btn-danger" href="{% url 'eliminar_tipomaterial' datos.id %}" role="button">
                                <i class="bi bi-trash3-fill">
                                    Eliminar
                                </i>              
                            </a>
          </td>
        </tr>
      </tbody>
    </table>
  
</main>