どうすればこのようにすることができますか？現時点で2つのテーブルの真中に線を入れる方法
は、私のページは次のようになります。ここでは
私のスニペットペン：http://codepen.io/Sidney-Dev/pen/ALPgbG
アムボーダーを使用しようとしているが、それは本当にとして活躍されていませんあなたは写真から見ることができます。
table.table-1 {
border-right: 1px solid #eeb422;
}
お手数ですが、
ここであなたはバディーになります。私のcodepen linkをチェックしてください。
基本的にはgive some padding to the parent divのクラスtablesが必要です。そしてあなたの要求に従ってsufficient paddingと一緒にborder-left to the right tableを与えてください。これが参考になることを願っています！ :)
EDIT 1： - あなたは（誰かがコメントで指摘したように）表示され、見出しから余分なスペースを削除したい場合は、単に基本的にclass orange（h3 tag which has some default marginにmargin as 0pxを与える必要があります削除する必要があります）。その解決方法は、codepen linkを確認してください。
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;
}<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>。それは彼がやったものとほぼ同じように見えます。あなたがラインをチェックし、投稿された質問の写真を比較すると、今のようにラインが上に行くことができないことがわかります。 –
@Aalind Sharma.私は実際にミドルラインにもっと焦点を当てていました。私の質問の最初の写真が上に表示されているように、短くすることはできませんか？ ありがとうございます。 –
@WosleyAlaricoは私の編集をチェックアウトします（EDIT 1）。それはあなたの問題を今解決していますか？ –
コード助けを求める質問は、質問自体に**それを再現するために必要な最短のコードを含める必要があります**好ましくは[**スタックスニペット**]（HTTPSで：//ブログ.stackoverflow.com/2014/09/introduction-runnable-javascript-css-and-html-code-snippets /）。 –
は、テーブルtable.table-1にmargin-rightを付けます。 – chirag
@chirag。 IOは画像を更新したので、ラインがどのように見えるかを見ることができます –