javascript - 为什么我的表格单元格区域上方有多余的空白区域？

Question

#main {
  width: 100%;
  display: table;
  border: 5px black solid;
}
#left {
  width: 75%;
  display: table-cell;
  background-color: #F0F0F0;
  border: 2px red solid;
}
#right {
  width: 25%;
  display: table-cell;
  /*background-color: #000000;*/
  border: 2px green solid;
}
#photo-center {
  position: relative;
}
#large {
  width: 80%;
}
#small {
  width: 25%;
  position: absolute;
  left: -20px;
  top: -20px;
  z-index: 1;
}

<div id="main">
  <div id="left">
    <div id="photo">
      <div id="photo-center">
        <img src="image/1.jpg" id="large">
        <img src="image/2.jpg" id="small">
      </div>
    </div>
  </div>
  <div id="right">
    <table>
      <tr>
        <td class="price">$180</td>
        <td class="buy">
          <a href="#">buy</a>
        </td>
      </tr>
      <tr>
        <td class="price">$180</td>
        <td class="buy">
          <a href="##">buy</a>
        </td>
      </tr>
      <tr>
        <td class="price">$180</td>
        <td class="buy">
          <a href="#">buy</a>
        </td>
      </tr>
      <tr>
        <td class="price">$180</td>
        <td class="buy">
          <a href="#">buy</a>
        </td>
      </tr>
      <tr>
        <td class="price">$180</td>
        <td class="buy">
          <a href="#">buy</a>
        </td>
      </tr>
      <tr>
        <td class="price">$180</td>
        <td class="buy">
          <a href="#">buy</a>
        </td>
      </tr>
    </table>
  </div>
</div>

为什么我的右表格单元格区域上方有额外的空白区域以及如何设置左表格单元格的大照片中心？

Answer 1

我的意思是你的 css 页面应该是这样的:

#main {
  width: 100%;
  display: table;
  border: 5px black solid;
}
#left {
  width: 85%;
  display: table-cell;
  background-color: #F0F0F0;
  border: 2px red solid;
}
#right {
  width: 15%;
  display: table-cell;
  /*background-color: #000000;*/
  border: 2px green solid;
}
#photo-center {
  position: relative;
}
#large {
  width: 80%;
}
#small {
  width: 25%;
  position: absolute;
  left: -20px;
  top: -20px;
  z-index: 1;
}