如何修复桌子倒挂

Question

我在.html文件中创建了一个表格，但检查完页面后，我的表格倒置了，我的第一行是最后一行。

#class-container {
	position: relative;
	width: 80%;
	top: 5%;
	margin: auto;
	background: white;
	padding-top: 100px;
	clear: both;
}

<div id="class-container">
		<table cellpadding="10px" width="100%">
			<tr>
				<th>
					<h1>
						Avantaje
					</h1>
				</th>
				<th>
					<h1>
						Dezavantaje
					</h1>
				</th>
			</tr>
			<tr>
				<ul type="square">
					<li>
						<h2>
							Consumul redus
						</h2>
					</li>
					<li>
						<h2>
							Poluarea aproape de zero in afara productiei
						</h2>
					</li>
					<li>
						<h2>
							Eficienta/randament foarte mare
						</h2>
					</li>
					<li>
						<h2>
							Accelerare instanta
						</h2>
					</li>
				</ul>
			</tr>
		</table>
	</div>

有趣的是，我在另一个具有相同div的.html文件中有另一个表，但该表没有问题 我浏览了网页，但找不到答案。

Answer 1

您应该将ul包裹在td中，这样可以将标头放回期望的位置。

#class-container {
  position: relative;
  width: 80%;
  top: 5%;
  margin: auto;
  background: white;
  padding-top: 100px;
}

<div id="class-container">
  <table cellpadding="10px" width="100%">
    <tr>
      <th>
        <h1>
          Avantaje
        </h1>
      </th>
      <th>
        <h1>
          Dezavantaje
        </h1>
      </th>
    </tr>
    <tr>
      <td>
        <ul type="square">
          <li>
            <h2>
              Consumul redus
            </h2>
          </li>
          <li>
            <h2>
              Poluarea aproape de zero in afara productiei
            </h2>
          </li>
          <li>
            <h2>
              Eficienta/randament foarte mare
            </h2>
          </li>
          <li>
            <h2>
              Accelerare instanta
            </h2>
          </li>
        </ul>
      </td>
      <td></td>
    </tr>
  </table>
</div>