使用 css 调整表格大小

Question

我的表单使用 3v 和 Django 5.1

我创建了一个 css 文件，但我不知道如何使用它，我的 CSS 仍然是空的。

设置.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 %}    

设计 在此输入图片描述

我希望我的桌子小一点。

有什么想法请

Answer 1

您可以首先将

table

标签更改为

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

它会为您调整表格大小...如果您有特定的表格大小，您可以参考文档并从那里检查您可能需要什么：https://getbootstrap.com/docs/ 4.0/内容/表格/

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