HTML列边框

Question

如何使用html和/或css实现以下外观？

我想在column1周围画一个边框。 可以在带有div的单个表中完成此操作，还是必须创建一个具有单个td和多行的新表？

Answer 1

希望这是您需要的：

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>

注意：还有其他方法可以执行此操作，但是由于您想在此处使用表（不需要两个表！）。

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

这是给您的fiddle。

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

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