Html column borders - html

Question

How do I achieve the following look and feel using html and/or css?
I want to draw a border around column1.
Can this be done in a single table with a div or will I have to create a new table with a single td and multiple rows?

Answer 1

Hopefully this is what you need:
CSS:
.border1
{
border: 2px solid black;
border-bottom:0px;
}
.border2
{
border: 2px solid black;
border-bottom:0px;
border-top:0px;
}
.border3
{
border: 2px solid black;
border-top:0px;
}
table
{
border-collapse: collapse;
}
<table>
<tr>
<td>q</td>
<td class="border1">q</td>
</tr>
<tr>
<td>q</td>
<td class="border2">q</td>
</tr>
<tr>
<td>q</td>
<td class="border2">q</td>
</tr>
<tr>
<td>q</td>
<td class="border3">q</td>
</tr>
</table>
Note: There are other ways to do this but since you wanted to use a table here you go(no need for two tables!!).

Answer 2

You can do it without table:(to set items one each other use flex)
.wrap{
display:flex;
}
.wrap-container{
border:1px solid black;
text-align:center;
width:30%;
margin-right:5px;
}
.elem{
border:1px solid black;
margin:5px;
margin-left: 5.5%;
width:150px;
padding:5px;
}
.title{
}
<div class="wrap">
<div class="wrap-container">
<div class="title">Column1</div>
<div class="elem">value</div>
<div class="elem">value</div>
<div class="elem">value</div>
<div class="elem">value</div>
<div class="elem">value</div>
</div>
<div class="wrap-container">
<div class="title">Column1</div>
<div class="elem">value</div>
<div class="elem">value</div>
<div class="elem">value</div>
<div class="elem">value</div>
<div class="elem">value</div>
</div>
</div>

Answer 3

Here is a fiddle for you.
.option-wrapper {
border: 2px solid blue;
width: 150px;
text-align: center;
}
.option-title {
color: blue;
margin-top: 10px;
}
.options {
margin-top: 10px;
}
.option {
border: 1px solid grey;
margin: 10px;
padding: 6px 0px;
}
<div class="option-wrapper">
<div class="option-title">
column1
</div>
<div class="options">
<div class="option">
option 1
</div>
<div class="option">
option 1
</div>
<div class="option">
option 1
</div>
<div class="option">
option 1
</div>
</div>
</div>
I've created a table-less solution, hopefully, this is what you're looking for.

Answer 4

You can write code like this.
CSS:
<style>
body {
margin: 0px;
padding: 0px;
}
.wrapper {
border: 1px solid red;
padding: 10px;
width: 200px;
}
.wrapper>div {
border: 1px solid blue;
font-size: 14px;
margin-bottom: 10px;
}
.wrapper>div:last-child {
border: 1px solid blue;
font-size: 14px;
margin-bottom: 0px;
}
</style>
HTML:
<div class="wrapper">
<div>view1</div>
<div>view2</div>
<div>view3</div>
<div>view4</div>
<div>view5</div>
</div>