<ul class="table1 clearfix">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
</ul>

<ul class="table2 clearfix">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
  </ul>
ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.table1 {
  float: left;
  width: 300px;
}

.table1 li {
  float: left;
  width: 101px; /* 3. 对应的为了让长宽还是100，要加1 */
  height: 101px;
  border: 1px solid #000;
  box-sizing: border-box; /* 1. 为了浮动成一行三个，得边框也算进长宽 */
  margin: -1px 0 0 -1px; /* 2. 左边、上边都-1px*/
}

.table2 {
  margin-left: 20px;
  float: left;
  width: 300px;
  border-right: 1px solid #000; /* 2. 给ul设置右下边框 */
  border-bottom: 1px solid #000;
}

.table2 li {
  float: left;
  width: 100px;
  height: 100px;
  border-top: 1px solid #000; /* 1. 只设置左上两个border */
  border-left: 1px solid #000;
  box-sizing: border-box;
}

.clearfix::after {
  content: '';
  display: block;
  clear: both;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.