How to impose the characteristics of such a plan? enter image description here

Actually interesting to do in tabular or block? And the question with dots ... how to stretch them? border-bottom?

2 answers 2

Semantically similar lists are closer to the definition list ( dl , dt , dd tags). Only a pair of "term-definition" goes in one line, and after the term comes the point.

It is great to pass the exact same thing with points, text, and not border-bottom: dotted .

Working example:

 dl { line-height: 24px; margin-bottom: 0; margin-top: 0; } dt { font-weight: bold; } .dt-dotted { overflow-x: hidden; position: relative; width: 200px; } .dt-dotted > span { position: relative; } .dt-dotted > span:after { color: #000; content: '..............................................................'; left: 100%; position: absolute; top: 0; } dd { margin-left: 0; position: relative; } .dl-inline > dt { clear: left; float: left; margin-right: 3px; } .dl-inline > dd { display: inline-block; margin-left: 0; } 
 <dl class="dl-inline"> <dt class="dt-dotted"> <span>Вес</span> </dt> <dd>36 шт</dd> </dl> <dl class="dl-inline"> <dt class="dt-dotted"> <span>Количество на поддоне</span> </dt> <dd>48 шт</dd> </dl> <dl class="dl-inline"> <dt class="dt-dotted"> <span>Прочность на сжатие</span> </dt> <dd>200-400 кгс/см</dd> </dl>

Or look at the code on jsfiddle

    Another option:

     ul { padding: 0; margin: 0; list-style-type: none; } ul li { display: block; overflow: hidden; position: relative; } .item__label { display: inline-block; position: relative; } .item__label:after { content: ''; position: absolute; left: 100%; right: -9999px; bottom: 0; border-bottom: 1px dotted #888; } .left { width: 80%; overflow: hidden; position: relative; float: left; } .item__cor { width: 20%; float: right; } 
     <ul> <li> <div class="left"> <span class="item__label">Вес</span> </div> <span class="item__cor">36 шт</span> </li> <li> <div class="left"> <span class="item__label">Количество на поддоне</span> </div> <span class="item__cor">48 шт</span> </li> <li> <div class="left"> <span class="item__label">Прочность</span> </div> <span class="item__cor">200 - 400 кг/см</span> </li> </ul>

    Same with the table:

     table { width: 100%; } .cur { width: 30%; } .name { overflow: hidden; } .name span { display: inline-block; position: relative; } .name span:after { content: ''; display: inline-block; border-bottom: 1px dotted #333; position: absolute; left: 100%; right: -9999px; bottom: 0; } 
     <table> <tbody> <tr> <td class="name"><span>Вес</span></td> <td class="cur">36 шт</td> </tr> <tr> <td class="name"><span>Количество на поддоне</span></td> <td class="cur">48 шт</td> </tr> <tr> <td class="name"><span>Прочность</span></td> <td class="cur">200 - 400 кг/см</td> </tr> </tbody> </table>