Page Widget How to - Put Table cell element inside table element

Question

We would like to know how to put Table cell element inside table element.

Answer


<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
.container {<!--from w  w w .ja va2 s . c  o  m-->
  display: table;
  table-layout: fixed
}

div {
  display: table-cell;
  padding: 15px;
  width: 200px;
}

div img {
  max-width: 100%;
}
</style>
</head>
<body>
  <div class="container">
    <div>
      <img src="http://placehold.it/200x200" />
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
        facilisis ante, facilisis posuere ligula feugiat ut. Fusce hendrerit
        vehicula congue. at ligula dolor. Lorem ipsum dolor sit amet,
        consectetur adipiscing elit. leo metus, aliquam eget convallis eget,
        molestie at massa.</p>
    </div>
  </div>
</body>
</html>

The code above is rendered as follows: