CodePen

HTML

            
              <!--[if lte IE 7]><style>

/* partial help for IE... */
ul.table li {
  display: inline;
  zoom: 1;
}

</style><![endif]-->
<h3>2 column</h3>
<ul class="table column2">
  <li>Div 1</li>
  <li>Div 2<br/>TALLER</li>
  <li>Div 3</li>
  <li>Div 4</li>
  <li>Div 5</li>
</ul>
<h3>3 column</h3>
<ul class="table column3">
  <li>Div 1</li>
  <li>Div 2</li>
  <li>Div 3</li>
  <li>
    <p>I guess this is pretty good?</p>
    <p>Or what do you think?</p>
  </li>
  <li>Div 5</li>
  <li>Div 6</li>
  <li>Div 7</li>
  <li>Div 8</li>
</ul>
<h3>4 column</h3>
<ul class="table column4">
  <li>Div 1</li>
  <li>Div 2</li>
  <li>Div 3</li>
  <li>Div 4</li>
  <li>Div 5</li>
  <li>
    <h4>Just so you know...</h4>
    <p>There are limitations. For content 32767 pixels in height is the limit.</p>
    <p>:hover will also highlight "empty" cells.</p>
  </li>
  <li>Div 7</li>
  <li>Div 8</li>
  <li>Div 9</li>
</ul>
<h3>5 column</h3>
<ul class="table column5">
  <li>Div 1</li>
  <li>Div 2</li>
  <li>Div 3</li>
  <li>Div 4</li>
  <li>Div 5</li>
  <li>Div 6</li>
  <li>Div 7</li>
  <li>Div 8</li>
  <li>Div 9</li>
</ul>
<h3>6 column</h3>
<ul class="table column6">
  <li>Div 1</li>
  <li>Div 2</li>
  <li>Div 3</li>
  <li>Div 4</li>
  <li>Div 5</li>
  <li>Div 6</li>
  <li>Div 7</li>
  <li>Div 8</li>
</ul>
<h3>7 column</h3>
<ul class="table column7">
  <li>Div 1</li>
  <li>Div 2</li>
  <li>Div 3</li>
  <li>Div 4</li>
  <li>Div 5</li>
  <li>Div 6</li>
  <li>Div 7</li>
  <li>Div 8</li>
</ul>
            
          
!

CSS

            
              ul.table {
  border: 1px solid black;
  display: block;
  font-size: 0;
  list-style: none;
  overflow: hidden;
  margin: 1em 0;
  padding: 0;
  position: relative;
  width: 100%;
}

ul.table li {
  background: #EEE;
  display: inline-block;
  font-size: medium;
  margin: -1px 0 -32767px 0;
  padding: 1px 0 32767px 0;
  vertical-align: top;
}

ul.table li:before {
  border-top: 1px solid black;
  content: '';
  left: 0;
  margin-top: -1px;
  position: absolute;
  width: 100%;
/* debug:
  background: red;
  height: 1px;
*/
}

ul.table li:after {
  border-left: 1px solid black;
  content: '';
  display: block;
  height: 100%;
  margin-left: -1px;
  position: absolute;
  top: 0;
/* debug:
  background: red;
  width: 1px;
*/
}

ul.column2 li {
  width: 50%;
}

ul.column3 li {
  width: 33.333%;
}

ul.column4 li {
  width: 25%;
}

ul.column5 li {
  width: 20%;
}

ul.column6 li {
  width: 16.666%;
}

ul.column7 li {
  width: 14.2857%;
}


ul.table li:hover {
  background: #BBB;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................