Html границы столбца

Question

Как мне добиться следующего вида с помощью html и / или css?

Я хочу нарисовать границу вокруг column1. Можно ли это сделать в одной таблице с div или мне нужно будет создать новую таблицу с одним td и несколькими строками?

Answer 1

Вы можете написать код, подобный этому.

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>

Answer 2

Вы можете сделать это без таблицы: (для задания элементов друг друга используйте 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

Вот вам скрипка .

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

Я создал решение без таблиц, надеюсь, это то, что вы ищете.

Answer 4

Надеюсь, это то, что вам нужно:

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>

Примечание: есть и другие способы сделать это, но поскольку вы хотите использовать таблицу, вы идете (нет необходимости в двух таблицах !!).