CSS Layout How to - Create book index layout with dotted lines

Question

We would like to know how to create book index layout with dotted lines.

Answer


<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
.row {<!-- www  .  j  a  v a  2s  .  c o  m-->
  display: table;
}

.title, .dots, .value {
  display: table-cell;
}

.title, .value {
  white-space: nowrap;
}

.table {
  width: 500px;
  margin: 10px;
}

.dots {
  border-bottom: 1px dotted gray;
  width: 100%;
}
</style>
</head>
<body>
  <div class="table">
    <div class="row">
      <div class="title">Big text here</div>
      <div class="dots"></div>
      <div class="value">57 MB</div>
    </div>
    <div class="row">
      <div class="title">Small title text</div>
      <div class="dots"></div>
      <div class="value">104 MB</div>
    </div>
    <div class="row">
      <div class="title">One more for good luck</div>
      <div class="dots"></div>
      <div class="value">4.8 MB</div>
    </div>
  </div>
</body>
</html>

The code above is rendered as follows: