Html 创建包含文本但仅显示文本的框

因此，我尝试为数据库中的每个数据创建一个框，即视图中已经加载的数据

这是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的理解错了吗？我想这已经是对的了

编辑： 完整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代码

您必须在td上添加CSS，并在CSS下面使用

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

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

---

使用inspect元素检查css覆盖检查DOM元素。在浏览器中呈现后，如果css被其他css类覆盖。使用对于css类很重要。为什么要添加td和TH呢？因为你想在每一行上都添加一个边框，所以你需要在子行上添加css，而不是在父行上添加css。我的意思是，在我的html中，我没有任何表，{[table}}只是一个变量好的，然后在class.box上添加一个边框，并添加display:block属性和border