Изменение размеров таблиц с помощью css

3v и Django 5.1 для моих форм

Я создал файл css, но не знаю, как его использовать, мой CSS по-прежнему пуст.

settings.py введите описание изображения здесь

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 %}    

дизайн введите описание изображения здесь

Хотелось бы, чтобы мой стол был поменьше.

Любая идея, пожалуйста

Вы можете начать с изменения тега table на

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

и он правильно подгонит размер таблицы... если у вас есть конкретный размер таблицы, вы можете обратиться к документации и проверить, что вам нужно оттуда: https://getbootstrap.com/docs/4.0/content/tables/

Вернуться на верх