html - 制作一个包含文本但仅显示文本的框

Question

所以我尝试为数据库中的每个数据制作一个盒子(数据已经加载到 View 中)

这是html

    <div id="edit" class="tab-pane">
                        <div class="row">
                          <div class="col-lg-8 col-lg-offset-2 detailed">
                            <h4 class="mb">List of Campaign</h4>
                                {% for table in obj2 %}
                                        <div class="boxes">
                                              {{table}}
                                        </div>
                                {% endfor %} 

                              </div>

                          </div>
                          <!-- /col-lg-8 -->
                        </div>
                        <!-- /row -->
                      </div>

这是CSS

.boxes
{
  border:10px solid black;
}

但它只显示数据列表，没有边框，我对 css 的理解有误吗？我觉得已经对了

编辑:完整的html代码

<section id="main-content">
      <section class="wrapper site-min-height">

               <!-- <div class="profile-pic">
                  <p><img src="img/ui-sam.jpg" class="img-circle"></p>
                -->
                  <!-- <p>
                    <button class="btn btn-theme"><i class="fa fa-check"></i> Follow</button>
                    <button class="btn btn-theme02">Add</button>
                  </p> 

          <!-- /col-lg-12 -->
          <div class="col-lg-12 mt">
            <div class="row content-panel">
              <!-- /panel-heading -->
              <div class="panel-body">
                <div class="tab-content">
                  <div id="overview" class="tab-pane active">
                  <!-- /tab-pane -->

                    <div class="row">
                      <div class="col-lg-8 col-lg-offset-2 detailed">
                        <h4 class="mb">List of Campaign</h4>
                            {% for table in obj2 %}
                                    <div class="boxes">
                                          {{table}}
                                    </div>
                            {% endfor %} 
                              </div>


                      </div>
                      <!-- /col-lg-8 -->
                    </div>
                    <!-- /row -->
                  </div>
                  <!-- /tab-pane -->
                </div>
                <!-- /tab-content -->
              </div>
              <!-- /panel-body -->
            </div>
            <!-- /col-lg-12 -->
          </div>
          <!-- /row -->
        </div>        
        <!-- /container -->
      </section>
      <!-- /wrapper -->

    </section>

这次修改的是完整的html代码

Answer 1

您必须在 td 和 th 上添加 CSS 使用下面的 CSS

.boxes td, .boxes th{
    border: 1px solid #000;
}