Make a boxes that contain text but it only display the text - html

Question

So i try to make a box , for each data that has in the database (the data already been load in views)
here's the 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>
here's the css
.boxes
{
border:10px solid black;
}
but it only display the list of data , without the border , am i wrong about the css? i thought it's already right
Edit :
full html code
<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>
this edit is the full html code

Answer 1

You have to add CSS on td and th Use below CSS
.boxes td, .boxes th{
border: 1px solid #000;
}