Apply CSS same as legend tag - html

Question

I want to create a border around my html component. HTML legend element can be used but i want to use it out of the form.
HTML Legend: http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_fieldset
I tried but there is an issue title and border. Below is the jsfiddle for the same.
.temp {
border: 1px solid #999;
margin-top: 20px;
padding: 20px;
position: relative;
}
http://jsfiddle.net/alpeshprajapati/a6a93fg9/1/
How can i achieve output same as legend ? Thanks.

Answer 1

You are pretty much there. The last step to make your markup look like a legend would be to add a background-color to the span which matches the background-color of .temp and the element that contains it. This ensures that the border or .temp does not show behind the text (as background-color is transparent by default).
.temp > span {
background-color: white;
font-size: 21px;
left: 2%;
position: absolute;
top: -15px;
}
.temp {
border: 1px solid #999;
margin-top: 20px;
padding: 20px;
position: relative;
}
<div class="temp">
<span>Permissions</span>
<table class="table cs-table-no-bordered table-striped">
<thead>
<tr>
<th>Modules</th>
<th class="text-center">Edit</th>
<th class="text-center">Delete</th>
<th class="text-center">View</th>
<th class="text-center">All</th>
</tr>
</thead>
<tbody>
<tr>
<td>M1</td>
<td class="text-center">
<input type="checkbox" />
</td>
<td class="text-center">
<input type="checkbox" />
</td>
<td class="text-center">
<input type="checkbox" />
</td>
<td class="text-center">
<input type="checkbox" />
</td>
</tr>
</tbody>
</table>
</div>