如何在两个表的中间放一条线

Question

我怎样才能做到这一点？

目前，我的网页看起来像这样：

这是我的代码段笔：http://codepen.io/Sidney-Dev/pen/ALPgbG

我试图使用边框，但从图片中可以看出它并没有真正起作用。

table.table-1 {
    border-right: 1px solid #eeb422;
}

希望你能提供帮助。

Answer 1

在这里，你好友。看看我的codepen link。

您基本上需要give some padding to the parent div课程tables。然后根据您的要求提供border-left to the right table和sufficient padding。希望这有用！ ：）

编辑1： - 如果您想从正在显示的标题中删除多余的空间（正如评论中指出的那样），您只需将margin as 0px提供给class orange（基本上是需要的h3 tag which has some default margin即将被删除 ）。请检查以下codepen link以获取该解决方案。

＆＃13;

＆＃13;

section#products{
  background-color: green;
}
li{
  list-style: none;
}
ul{
  padding-left:0;
}

span.cigars {
    color: white;
}

section#products div.container > p {
    margin-bottom: 3px;
}

tr {
    text-align: left;
}

table{
    width: 50%;
}

th.tg-yw4l,
td.tg-yw4l,
.tables {
    display: flex;
}

.tables{
    padding: 30px;
}

table ul:nth-child(odd) {
  /*  padding-right: 60px;*/
}

table.table-2 {
    border-left: 1px solid #eeb422;
  padding-left: 40px;
}

＆＃13;

<section id="products">
  <div class="tables">
    <table class="table-1">
      <tbody>
        <tr>
          <td>
          <h3 class="orange">Cuban <span class="cigars">Cigars</span></h3>
          </td>
          </tr>
        <tr>
          <th class="tg-yw4l">
            <ul class="list-1">
              <li>Lorem Ipsum is simply</li>
              <li>Lorem Ipsum is simply</li>
              <li>Lorem Ipsum is simply</li>
              <li>Lorem Ipsum is simply</li>
              <li>Lorem Ipsum is simply</li>
              <li>Lorem Ipsum is simply</li>
              <li>Lorem Ipsum is simply</li>
              <li>Lorem Ipsum is simply</li>
              <li>Lorem Ipsum is simply</li>
              <li>Lorem Ipsum is simply</li>
            </ul>
            <ul class="list-2">
              <li></li>
              <li>Lorem Ipsum is simply</li>
              <li>Lorem Ipsum is simply</li>
              <li>Lorem Ipsum is simply</li>
              <li>Lorem Ipsum is simply</li>
              <li>Lorem Ipsum is simply</li>
              <li>Lorem Ipsum is simply</li>
              <li>Lorem Ipsum is simply</li>
              <li>Lorem Ipsum is simply</li>
              <li>Lorem Ipsum is simply</li>
              <li>Lorem Ipsum is simply</li>
            </ul>
          </th>
        </tr>
        <tr>
          <td>
          <h3 class="orange">Machine made <span class="cigars">Cigars</span></h3>
          </td>
        </tr>
        <tr>
          <td class="tg-yw4l">
            <ul class="list-1">
              <li>Lorem Ipsum is simply</li>
              <li>Lorem Ipsum is simply</li>
              <li>Lorem Ipsum is simply</li>
              <li>Lorem Ipsum is simply</li>
              <li>Lorem Ipsum is simply</li>
              <li>Lorem Ipsum is simply</li>
              <li>Lorem Ipsum is simply</li>
              <li>Lorem Ipsum is simply</li>
              <li>Lorem Ipsum is simply</li>
              <li>Lorem Ipsum is simply</li>
            </ul>
            <ul class="list-2">
              <li>Lorem Ipsum is simply</li>
              <li>Lorem Ipsum is simply</li>
              <li>Lorem Ipsum is simply</li>
              <li>Lorem Ipsum is simply</li>
              <li>Lorem Ipsum is simply</li>
              <li>Lorem Ipsum is simply</li>
              <li>Lorem Ipsum is simply</li>
              <li>Lorem Ipsum is simply</li>
              <li>Lorem Ipsum is simply</li>
              <li>Lorem Ipsum is simply</li>
            </ul>
          </td>
        </tr>
      </tbody>
    </table>
    <table class="table-2">
      <tbody>
        <tr>
          <td>
            <h3 class="orange">Non Cuban <span class="cigars">Cigars</span></h3>
          </td>
        </tr>
        <tr>
          <th class="tg-yw4l">
            <ul class="list-1">
              <li>Lorem Ipsum is simply</li>
              <li>Lorem Ipsum is simply</li>
              <li>Lorem Ipsum is simply</li>
              <li>Lorem Ipsum is simply</li>
              <li>Lorem Ipsum is simply</li>
              <li>Lorem Ipsum is simply</li>
              <li>Lorem Ipsum is simply</li>
              <li>Lorem Ipsum is simply</li>
              <li>Lorem Ipsum is simply</li>
              <li>Lorem Ipsum is simply</li>
            </ul>
            <ul class="list-2">
              <li>Lorem Ipsum is simply</li>
              <li>Lorem Ipsum is simply</li>
              <li>Lorem Ipsum is simply</li>
              <li>Lorem Ipsum is simply</li>
              <li>Lorem Ipsum is simply</li>
              <li>Lorem Ipsum is simply</li>
              <li>Lorem Ipsum is simply</li>
              <li>Lorem Ipsum is simply</li>
              <li>Lorem Ipsum is simply</li>
              <li>Lorem Ipsum is simply</li>
            </ul>
          </th>
          </tr>
          <tr>
        <td>
        <h3 class="orange">Other</h3>
        </td>
        </tr>
        <tr>
        <td class="tg-yw4l">
        <ul class="list-1">
          <li>Lorem Ipsum is simply</li>
          <li>Lorem Ipsum is simply</li>
          <li>Lorem Ipsum is simply</li>
          <li>Lorem Ipsum is simply</li>
          <li>Lorem Ipsum is simply</li>
          <li>Lorem Ipsum is simply</li>
          <li>Lorem Ipsum is simply</li>
          <li>Lorem Ipsum is simply</li>
          <li>Lorem Ipsum is simply</li>
          <li>Lorem Ipsum is simply</li>
        </ul>
        <ul class="list-2">
          <li>Lorem Ipsum is simply</li>
          <li>Lorem Ipsum is simply</li>
          <li>Lorem Ipsum is simply</li>
          <li>Lorem Ipsum is simply</li>
          <li>Lorem Ipsum is simply</li>
          <li>Lorem Ipsum is simply</li>
          <li>Lorem Ipsum is simply</li>
          <li>Lorem Ipsum is simply</li>
          <li>Lorem Ipsum is simply</li>
          <li>Lorem Ipsum is simply</li>
        </ul>
        </td>
        </tr>
      </tbody>
    </table>
  </div>
</section>

＆＃13;

＆＃13;

＆＃13;