Мой HTML похож на это
Codepen
https://codepen.io/anon/pen/YBgJLE
Как вы можете видеть здесь, есть три таблицы для контента, и этовыровняйте по трем столбцам, я хочу объединить эти три таблицы в одну и сохранить одинаковое расположение.При объединении я не хочу, чтобы какой-либо разделитель использовался для определения того, какой контент должен идти в какой столбец.В зависимости от размера содержимого CSS должен разбить его на три столбца (из этих трех столбцов средний является разделительным изображением, я хочу сохранить это изображение в последнем элементе таблицы и получить такой же макет.) HTML Iпытаюсь построить вот так
<table style="width: 800px; margin: 0px; margin-top: 10px; padding: 0px; border-collapse: collapse;">
<tr>
<td style="width: 46%; vertical-align: top; padding-right:2%;">
<table style="margin: 0px; padding: 0px; width: 100%;">
<tbody>
<tr>
<td>
<h3 style=" padding: 2px 5px; background: #dadada;">Client Details</h3>
<span style="font-weight: bold;">Reference: </span><span style="border-bottom: 1px solid #ccc;">1234567</span>
<span> </span>
<span style="font-weight: bold;">Lorem ipsum Brand: </span><span style="border-bottom: 1px solid #ccc;"> Lorem ipsum</span>
</td>
</tr>
<tr>
<td>
<div class="break"></div>
<h3 style=" padding: 2px 5px; background: #dadada;">Trades</h3>
<span style="font-weight: bold;">Installer: </span><span style="border-bottom: 1px solid #ccc;">Hohn Read</span>
<span> </span>
<span style="font-weight: bold;">Other Notes: </span><span style="border-bottom: 1px solid #ccc;">Full Description notes will comes here ...</span>
<span> </span>
<span style="font-weight: bold;">Lorem ipsum: </span><span style="border-bottom: 1px solid #ccc;">05/18/2018</span>
<span> </span>
<span style="font-weight: bold;">Lorem ipsum: </span><span style="border-bottom: 1px solid #ccc;">06/18/2018</span>
<span> </span>
<span style="font-weight: bold;">Lorem ipsum: </span><span style="border-bottom: 1px solid #ccc;">Isaac</span>
<span> </span>
<span style="font-weight: bold;">Isaac Notes: </span><span style="border-bottom: 1px solid #ccc;">Full Description notes will comes here ...</span>
<span> </span>
<span style="font-weight: bold;">Removal: </span><span style="border-bottom: 1px solid #ccc;">Yes</span>
<span> </span>
<span style="font-weight: bold;">Lorem ipsum: </span><span style="border-bottom: 1px solid #ccc;">Yes</span>
<span> </span>
<span style="font-weight: bold;">Lorem ipsum: </span><span style="border-bottom: 1px solid #ccc;">Yes</span>
<span> </span>
<span style="font-weight: bold;">Lorem ipsum </span><span style="border-bottom: 1px solid #ccc;">Full Description notes will comes here ...</span>
<span> </span>
<span style="font-weight: bold;">Lorem ipsum: </span><span style="border-bottom: 1px solid #ccc;">Yes</span>
<span> </span>
<span style="font-weight: bold;">Lorem ipsum: </span><span style="border-bottom: 1px solid #ccc;">Full Description notes will comes here ...</span>
<span> </span>
<span style="font-weight: bold;">Contact Name: </span><span style="border-bottom: 1px solid #ccc;">Alec Lawless</span>
<span> </span>
<span style="font-weight: bold;">Contact No.: </span><span style="border-bottom: 1px solid #ccc;">123 456 7891012</span>
<span> </span>
<span style="font-weight: bold;">Notes: </span><span style="border-bottom: 1px solid #ccc;">Full Description notes will comes here ...</span>
</td>
</tr>
<tr>
<td>
<div class="break"></div>
<h3 style=" padding: 2px 5px; background: #dadada;">Lorem ipsum Section</h3>
<h4 style=" padding: 2px 5px;background: #ececec;margin-top:1px;">Lorem ipsum Section <img src="images/right-arrow.png" alt="inside"> Lorem ipsum <img src="images/right-arrow.png" alt="selected"> Designer</h4>
<span style="font-weight: bold;">Lorem ipsum: </span><span style="border-bottom: 1px solid #ccc;">Michael Read</span>
<span> </span>
<span style="font-weight: bold;">Other Notes: </span><span style="border-bottom: 1px solid #ccc;">Full Description notes will comes here ...</span>
</td>
</tr>
<tr>
<td>
<div class="break"></div>
<h4 style=" padding: 2px 5px;background: #ececec;margin-top:1px;">Lorem ipsum Section <img src="images/right-arrow.png" alt="selected"> Lorem ipsum Position</h4>
<span style="font-weight: bold;">Lorem ipsum: </span><span style="border-bottom: 1px solid #ccc;">Elite name comes here</span>
<span> </span>
<span style="font-weight: bold;">Other Notes: </span><span style="border-bottom: 1px solid #ccc;">Full Description notes will comes here ...</span>
<span> </span>
<span style="font-weight: bold;">Heritage: </span><span style="border-bottom: 1px solid #ccc;">Heritage comes here</span>
<span> </span>
<span style="font-weight: bold;">Other Notes: </span><span style="border-bottom: 1px solid #ccc;">Full Description notes will comes here ...</span>
</td>
</tr>
<tr>
<td>
<div class="break"></div>
<h4 style=" padding: 2px 5px;background: #ececec;margin-top:1px;">Handles Section <img src="images/right-arrow.png" alt="selected"> Thermal Handle Position</h4>
<span style="font-weight: bold;">Other: </span><span style="border-bottom: 1px solid #ccc;">Yes</span>
<span> </span>
<span style="font-weight: bold;">Other Notes: </span><span style="border-bottom: 1px solid #ccc;">Full Description notes will comes here ...</span>
</td>
</tr>
<tr>
<td>
<div class="break"></div>
<h4 style=" padding: 2px 5px;background: #ececec;margin-top:1px;">Lorem ipsum Section: <img src="images/right-arrow.png" alt="selected"> Notes</h4>
<span style="font-weight: bold;">Other Notes: </span><span style="border-bottom: 1px solid #ccc;">Full Description notes will comes here ...</span>
</td>
</tr>
<tr>
<td>
<div class="break"></div>
<h3 style=" padding: 2px 5px; background: #dadada;">Lorem ipsum</h3>
<h4 style=" padding: 2px 5px;background: #ececec;margin-top:1px;">Lorem ipsum <img src="images/right-arrow.png" alt="selected"> Types</h4>
<span style="font-weight: bold;">Lorem ipsum: </span><span style="border-bottom: 1px solid #ccc;">Lorem ipsum</span>
<span> </span>
<span style="font-weight: bold;">Lorem ipsum-Main: </span><span style="border-bottom: 1px solid #ccc;">Dapper Grey</span>
<span> </span>
<span style="font-weight: bold;">Colour-Main Notes: </span><span style="border-bottom: 1px solid #ccc;">Full Description notes comes here</span>
<span> </span>
<span style="font-weight: bold;">Lorem ipsum: </span><span style="border-bottom: 1px solid #ccc;">Yes</span>
<span> </span>
<span style="font-weight: bold;">Lorem ipsum Direction: </span><span style="border-bottom: 1px solid #ccc;">Lorem ipsum</span>
<span> </span>
<span style="font-weight: bold;">Notes: </span><span style="border-bottom: 1px solid #ccc;">Full Description notes comes here</span>
</td>
</tr>
<tr>
<td>
<span style="font-weight: bold;">Colour-Second: </span><span style="border-bottom: 1px solid #ccc;">Lorem ipsum White</span>
<span> </span>
<span style="font-weight: bold;">Colour-Second Notes: </span><span style="border-bottom: 1px solid #ccc;">Description will comes here</span>
<span> </span>
<span style="font-weight: bold;">Lorem ipsum: </span><span style="border-bottom: 1px solid #ccc;">Yes</span>
<span> </span>
<span style="font-weight: bold;">Lorem ipsum Direction: </span><span style="border-bottom: 1px solid #ccc;">Horizantal</span>
<span> </span>
<span style="font-weight: bold;">Lorem ipsum: </span><span style="border-bottom: 1px solid #ccc;">Full Description notes will comes here</span>
<span> </span>
<span style="font-weight: bold;">Lorem ipsum-Tape: </span><span style="border-bottom: 1px solid #ccc;">2mm</span>
<span> </span>
<span style="font-weight: bold;">Lorem ipsum: </span><span style="border-bottom: 1px solid #ccc;">Lorem ipsum</span>
<span> </span>
<span style="font-weight: bold;">Colour-Main: </span><span style="border-bottom: 1px solid #ccc;">Lorem ipsum Grey</span>
<span> </span>
<span style="font-weight: bold;">Colour-Main Notes: </span><span style="border-bottom: 1px solid #ccc;">Full Description notes will comes here</span>
<span> </span>
<span style="font-weight: bold;">Colour-Second: </span><span style="border-bottom: 1px solid #ccc;">Lorem ipsum White</span>
<span> </span>
<span style="font-weight: bold;">Colour-Second Notes: </span><span style="border-bottom: 1px solid #ccc;">Description will comes here</span>
<span> </span>
<span style="font-weight: bold;">Lorem ipsum/ Wrap: </span><span style="border-bottom: 1px solid #ccc;">Lorem ipsum</span>
<span> </span>
<span style="font-weight: bold;">Colour-Main: </span><span style="border-bottom: 1px solid #ccc;">Lorem ipsum Grey</span>
<span> </span>
<span style="font-weight: bold;">Colour-Main Notes: </span><span style="border-bottom: 1px solid #ccc;">Description will comes here</span>
<span> </span>
<span style="font-weight: bold;">Colour-Main: </span><span style="border-bottom: 1px solid #ccc;">Lorem ipsum Grey</span>
<span> </span>
<span style="font-weight: bold;">Style: </span><span style="border-bottom: 1px solid #ccc;">Style Text</span>
<span> </span>
<span style="font-weight: bold;">Lorem ipsum Set Option: </span><span style="border-bottom: 1px solid #ccc;">Lorem ipsum Bank</span>
<span> </span>
<span style="font-weight: bold;"> Option Note: </span><span style="border-bottom: 1px solid #ccc;">Description will comes here</span>
<span> </span>
<span style="font-weight: bold;"> Doors: </span><span style="border-bottom: 1px solid #ccc;"> Yes</span>
<span> </span>
<span style="font-weight: bold;"> Note: </span><span style="border-bottom: 1px solid #ccc;">Description will comes here</span>
<span> </span>
<span style="font-weight: bold;"> Note: </span><span style="border-bottom: 1px solid #ccc;">Description will comes here</span>
<span> </span>
<span style="font-weight: bold;">Colour: </span><span style="border-bottom: 1px solid #ccc;">Arctic White</span>
<span> </span>
<span style="font-weight: bold;">Colour Notes: </span><span style="border-bottom: 1px solid #ccc;">Description will comes here</span>
</td>
</tr>
<tr>
<td>
<div class="break"></div>
<h4 style=" padding: 2px 5px;background: #ececec;margin-top:1px;">Doors & Drawer Fronts <img src="images/right-arrow.png" alt="selected"> Glass</h4>
<span style="font-weight: bold;">Glass: </span><span style="border-bottom: 1px solid #ccc;"> Yes</span>
<span> </span>
<span style="font-weight: bold;">Door : </span><span style="border-bottom: 1px solid #ccc;">Material Text</span>
<span> </span>
<span style="font-weight: bold;">Door : </span><span style="border-bottom: 1px solid #ccc;">Door Style Text</span>
<span> </span>
<span style="font-weight: bold;">Glass : </span><span style="border-bottom: 1px solid #ccc;">Toughend</span>
<span> </span>
<span style="font-weight: bold;">Notes: </span><span style="border-bottom: 1px solid #ccc;">Description will comes here</span>
</td>
</tr>
<tr>
<td>
<div class="break"></div>
<h4 style=" padding: 2px 5px;background: #ececec;margin-top:1px;">Doors & Drawer Fronts <img src="images/right-arrow.png" alt="selected"> Shelves/Divisions</h4>
<span style="font-weight: bold;">Shelves: </span><span style="border-bottom: 1px solid #ccc;"> Yes</span>
<span> </span>
<span style="font-weight: bold;">Selected: </span><span style="border-bottom: 1px solid #ccc;">Dapper Grey</span>
<span> </span>
<span style="font-weight: bold;">Colour-Main Notes: </span><span style="border-bottom: 1px solid #ccc;">Description will comes here</span>
<span> </span>
<span style="font-weight: bold;">Lorem ipsum: </span><span style="border-bottom: 1px solid #ccc;">20mm</span>
<span> </span>
<span style="font-weight: bold;">Depth: </span><span style="border-bottom: 1px solid #ccc;">2mm</span>
<span> </span>
<span style="font-weight: bold;">Fixing Notes: </span><span style="border-bottom: 1px solid #ccc;">Description will comes here</span>
</td>
</tr>
<tr>
<td>
<div class="break"></div>
<h3 style=" padding: 2px 5px; background: #dadada;">Panels</h3>
<h4 style=" padding: 2px 5px;background: #ececec;margin-top:1px;">Panels <img src="images/right-arrow.png" alt="selected"> Panel Type</h4>
<span style="font-weight: bold;">Lorem ipsum: </span><span style="border-bottom: 1px solid #ccc;"> Yes</span>
<span> </span>
<span style="font-weight: bold;">Select: </span><span style="border-bottom: 1px solid #ccc;">Lorem ipsum</span>
<span> </span>
<span style="font-weight: bold;">Select: </span><span style="border-bottom: 1px solid #ccc;">Lorem ipsum</span>
<span> </span>
<span style="font-weight: bold;">Select Style: </span><span style="border-bottom: 1px solid #ccc;">CSV Style</span>
<span> </span>
<span style="font-weight: bold;">Select Colour: </span><span style="border-bottom: 1px solid #ccc;">Black</span>
</td>
</tr>
<tr>
<td>
<div class="break"></div>
<h3 style=" padding: 2px 5px; background: #dadada;">Panels</h3>
<h4 style=" padding: 2px 5px;background: #ececec;margin-top:1px;">Panels <img src="images/right-arrow.png" alt="selected"> Lorem ipsum Type</h4>
<span style="font-weight: bold;">Select: </span><span style="border-bottom: 1px solid #ccc;"> Yes</span>
<span> </span>
<span style="font-weight: bold;">Select: </span><span style="border-bottom: 1px solid #ccc;">Lorem ipsum</span>
<span> </span>
<span style="font-weight: bold;">Select: </span><span style="border-bottom: 1px solid #ccc;">Lorem ipsum</span>
<span> </span>
<span style="font-weight: bold;">Select Style: </span><span style="border-bottom: 1px solid #ccc;">CSV Style</span>
<span> </span>
<span style="font-weight: bold;">Select Colour: </span><span style="border-bottom: 1px solid #ccc;">Lorem ipsum</span>
</td>
</tr>
<tr>
<td style="float: left;">
<img src="images/divider2.png" alt="divider" style="float: left; width: 18px;">
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
Но это должно отображаться как мой первый HTML в трех столбцах.Как мне этого добиться?И я не могу использовать Javascript для этого, все должно быть сделано с помощью HTML и CSS.
Примечание: я не могу поместить любой элемент HTML, чтобы отделить там, где должен начинаться второй или третий столбец (в моем серверекод, который я не могу найти, по какой строке должен идти разделитель, чтобы отобразить его без пробелов)