如何使两个细胞在CSS高度上相互独立？

Question

我正在试着把我的业务清单列出来。我想象16:9显示器上有两个细胞看起来像这。

我想用HTML中的一个表来完成这个任务：

​

<table style="width:100%">
  <tr>
    <th>service</th>
    <th>service</th>
  </tr>
  <tr>
    <td>text text text </td>
    <td>text</td>
  </tr>
  <tr>
    <th>service</th>
    <th>service</th>
  </tr>
  <tr>
    <td>text text text text</td>
    <td>text text</td>
  </tr>
</table>

​

这是可行的，但较长的文本在右侧停止在下一个服务标题的开始在左侧。我想让左细胞独立于右边。

我怎样才能解决这个问题？

Answer 1

您可以从以下内容开始：

小提琴去玩。

​

.MainDiv {
  height: 800px;
  width: 100%;
  border: 1px solid red;
  display: flex;
  padding: 10px;
}

.leftDiv {
  height: 800px;
  width: 50%;
  border: 1px solid blue;
  margin: 10px;
}

.rightDiv {
  height: 800px;
  width: 50%;
  border: 1px solid blue;
  margin: 10px;
}

<div class="MainDiv">

  <div class="leftDiv">
    <h1>
      Service title
    </h1>
    left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left

    <h1>
      Service title
    </h1>
    left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left
    left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left
    left left left left left left left


    <h1>
      Service title
    </h1>
    left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left
  </div>
  <div class="rightDiv">
    <h1>
      Service title
    </h1>
    Right right right right right right Right right right right right right Right right right right right right Right right right right right right Right right right right right right Right right right right right right Right right right right right right
    Right right right right right right Right right right right right right Right right right right right right Right right right right right right Right right right right right right Right right right right right right Right right right right right right
    Right right right right right right
    <h1>
      Service title
    </h1>
    Right right right right right right Right right right right right right Right right right right right right Right right right right right right Right right right right right right
    <h1>
      Service title
    </h1>
    Right right right right right right Right right right right right right Right right right right right right Right right right right right right Right right right right right right
  </div>
</div>

​