html - 如何使两个跨度从 td 表内的同一行开始

Question

我希望表格内的两个跨度对齐并同时开始
这是图像以了解更多我的意思

.btContentHolder table td, .btContentHolder table th {
    /* padding: 10px; */
    counter-increment: step-counter;
    margin-bottom: 10px;
    position: relative;
    padding-left: 2.5714em;
    padding-top: 2em;
    padding-right: .2em;
}
.pli{
    position: absolute;
    left: .3em;
    top: 1.5em;
    z-index: 100;
    content: counter(step-counter);
    background-color: #fff;
    color: #2b6a83;
    font-size: 1.4285em;
    border: solid 1px #2b6a83;
    border-radius: 50%;
    width: 25px;
    height: 25px;
    line-height: 1.2em;
    text-align: center;
}
.pli:hover{
    background-color: #2b6a83;
    color: #fff;
    border: solid 1px #fff;
}
.cli{
    position: absolute;
    left: .3em;
    top: 1.5em;
    z-index: 100;
    content: counter(step-counter);
    background-color: #fff;
    color: #e9736a;
    font-size: 1.4285em;
    border: solid 1px #e9736a;
    border-radius: 50%;
    width: 25px;
    height: 25px;
    line-height: 1.2em;
    text-align: center;
}
.cli:hover{
    background-color: #e9736a;
    color: #fff;
    border: solid 1px #fff;
}
.protd{
        background-color: #2b6a831c;
}
.contd{
        background-color: #ff000024;
}

<h2 style="text-align: center;"><span style="color: #2b6a83; font-family: Krub;">In-Home Care</span></h2>
<table>
<tbody style="padding-bottom: 20px;">
<tr>
<th style="text-align: center; font-weight: 500; color: #ffffff; font-size: 24pt; font-family: Krub; background-color: #2b6a83; padding: 0px;">Pros</th>
<th style="font-weight: 500; font-size: 24pt; font-family: Krub; color: #ffffff; background-color: #e9736a; padding: 0px; text-align: center;">Cons</th>
</tr>
<tr>
<td class="protd"><span class="pli">1</span><span style="font-size: 14pt; font-family: Krub;">One-on-one care tailored to meet unique preferences and needs.</span></td>
<td class="contd"><span class="cli">1</span><span style="font-size: 14pt; font-family: Krub;">When 24/7 care is required, the costs can be very high.</span></td>
</tr>
<tr>
<td class="protd"><span class="pli">2</span><span style="font-size: 14pt; font-family: Krub;">Remain in the comfort of their own home with a safe, familiar setting.</span></td>
<td class="contd"><span class="cli">2</span><span style="font-size: 14pt; font-family: Krub;">Managing caregivers and backup care planning requires continued family involvement.</span></td>
</tr>
<tr>
<td class="protd"><span class="pli">3</span><span style="font-size: 14pt; font-family: Krub;">The opportunity to choose the person who will be providing care.</span></td>
<td class="contd"><span class="cli">3</span><span style="font-size: 14pt; font-family: Krub;">Living in the home can lead to social isolation if there is little presence of family or friends.</span></td>
</tr>
<tr>
<td class="protd"><span class="pli">4</span><span style="font-size: 14pt; font-family: Krub;">The individual can get service from the same consistent caregiver.</span></td>
<td class="contd"><span class="cli">4</span><span style="font-size: 14pt; font-family: Krub;">The home may need to be modified for wheelchair accessibility or safety precautions.</span></td>
</tr>
<tr>
<td class="protd"><span class="pli">5</span><span style="font-size: 14pt; font-family: Krub;">Home care can cheaper depending on the skill level required and services can be combined to lower costs.</span></td>
<td class="contd"><span class="cli">5</span><span style="font-size: 14pt; font-family: Krub;">Fewer social activities may take place as opposed to care homes and facilities.</span></td>
</tr>
</tbody>
</table>
</div>
<div class="col-md-6" style="width: 2%;"></div>
<div class="col-md-6" style="width: 49%;">
<h2 style="text-align: center;"><span style="color: #2b6a83; font-family: Krub;">Assisted Living</span></h2>
<table>
<tbody>
<tr>
<th style="text-align: center; font-weight: 500; color: #ffffff; font-size: 24pt; font-family: Krub; background-color: #2b6a83; padding: 0px;">Pros</th>
<th style="font-weight: 500; font-size: 24pt; font-family: Krub; color: #ffffff; background-color: #e9736a; padding: 0px; text-align: center;">Cons</th>
</tr>
<tr>
<td class="protd"><span class="pli">1</span><span style="font-size: 14pt; font-family: Krub;">More affordable when 24/7 care is required.</span></td>
<td class="contd"><span class="cli">1</span><span style="font-size: 14pt; font-family: Krub;">Longer wait times to get admitted into an assisted living facility.</span></td>
</tr>
<tr>
<td class="protd"><span class="pli">2</span><span style="font-size: 14pt; font-family: Krub;">Allows the family to focus more on their relationship with their loved one.</span></td>
<td class="contd"><span class="cli">2</span><span style="font-size: 14pt; font-family: Krub;">Frequent changes to the staff mean one-on-care won’t be as consistent.</span></td>
</tr>
<tr>
<td class="protd"><span class="pli">3</span><span style="font-size: 14pt; font-family: Krub;">Residents have ample opportunities to socialize with others.</span></td>
<td class="contd"><span class="cli">3</span><span style="font-size: 14pt; font-family: Krub;">The quality of care can differ depending on the various care workers.</span></td>
</tr>
<tr>
<td class="protd"><span class="pli">4</span><span style="font-size: 14pt; font-family: Krub;">Family will not have to manage, schedule or hire care providers.</span></td>
<td class="contd"><span class="cli">4</span><span style="font-size: 14pt; font-family: Krub;">Residents may get kicked out of their assisted living home with little to no advanced notice.</span></td>
</tr>
<tr>
<td class="protd"><span class="pli">5</span><span style="font-size: 14pt; font-family: Krub;">The level of care can easily be increased as necessary.</span></td>
<td class="contd"><span class="cli">5</span><span style="font-size: 14pt; font-family: Krub;">Your loved one may simply not enjoy living in a group environment.</span></td>
</tr>
</tbody>
</table>

Answer 1

您可以使用以下代码。我为每个放置的 td 进行水平对齐 vertical-align: top; .你可以改变它。

.btContentHolder table td,
.btContentHolder table th {
  /* padding: 10px; */
  counter-increment: step-counter;
  margin-bottom: 10px;
  position: relative;
  padding-left: 2.5714em;
  padding-top: 2em;
  padding-right: .2em;
}

.pli {
  position: relative;
  margin-right: 10px;
  z-index: 100;
  content: counter(step-counter);
  background-color: #fff;
  color: #2b6a83;
  font-size: 1.2285em;
  border: solid 1px #2b6a83;
  border-radius: 50%;
  text-align: center;
  padding: 3px 7px;
  display: inline-block;
}

.pli:hover {
  background-color: #2b6a83;
  color: #fff;
  border: solid 1px #fff;
}

.cli {
  position: relative;
  margin-right: 10px;
  z-index: 100;
  content: counter(step-counter);
  background-color: #fff;
  color: #e9736a;
  font-size: 1.4285em;
  border: solid 1px #e9736a;
  border-radius: 50%;
  padding: 3px 7px;
}

.cli:hover {
  background-color: #e9736a;
  color: #fff;
  border: solid 1px #fff;
}

.protd {
  background-color: #2b6a831c;
  padding: 10px;
}

.contd {
  background-color: #ff000024;
  padding: 10px;
}

#table1 .col1 {
  float: left;
  width: 8%;
}

#table1 .col2 {
  float: left;
  width: 92%;
}

#table2 .col1 {
  float: left;
  width: 12%;
}

#table2 .col2 {
  float: left;
  width: 88%;
}
td{
  vertical-align: top;
}

<h2 style="text-align: center;"><span style="color: #2b6a83; font-family: Krub;">In-Home Care</span></h2>
<table id="table1">
  <tbody style="padding-bottom: 20px;">
    <tr>
      <th style="text-align: center; font-weight: 500; color: #ffffff; font-size: 24pt; font-family: Krub; background-color: #2b6a83; padding: 0px;">Pros</th>
      <th style="font-weight: 500; font-size: 24pt; font-family: Krub; color: #ffffff; background-color: #e9736a; padding: 0px; text-align: center;">Cons</th>
    </tr>
    <tr>
      <td class="protd">
        <div class="col1"><span class="pli">1</span></div>
        <div class="col2"><span style="font-size: 14pt; font-family: Krub;">One-on-one care tailored to meet unique preferences and needs.</span></div>
      </td>
      <td class="contd">
        <div class="col1"><span class="cli">1</span></div>
        <div class="col2"><span style="font-size: 14pt; font-family: Krub;">When 24/7 care is required, the costs can be very high.</span></div>
      </td>
    </tr>
    <tr>
      <td class="protd">
        <div class="col1"><span class="pli">2</span></div>
        <div class="col2"><span style="font-size: 14pt; font-family: Krub;">Remain in the comfort of their own home with a safe, familiar setting.</span></div>
      </td>
      <td class="contd">
        <div class="col1"><span class="cli">2</span></div>
        <div class="col2"><span style="font-size: 14pt; font-family: Krub;">Managing caregivers and backup care planning requires continued family involvement.</span></div>

      </td>
    </tr>
    <tr>
      <td class="protd">
        <div class="col1"><span class="pli">3</span></div>
        <div class="col2"><span style="font-size: 14pt; font-family: Krub;">The opportunity to choose the person who will be providing care.</span></div>
      </td>
      <td class="contd">
        <div class="col1"><span class="cli">3</span></div>
        <div class="col2"><span style="font-size: 14pt; font-family: Krub;">Living in the home can lead to social isolation if there is little presence of family or friends.</span></div>
      </td>
    </tr>
    <tr>
      <td class="protd">
        <div class="col1"><span class="pli">4</span></div>
        <div class="col2"><span style="font-size: 14pt; font-family: Krub;">The individual can get service from the same consistent caregiver.</span></div>
      </td>
      <td class="contd">
        <div class="col1"><span class="cli">4</span></div>
        <div class="col2"><span style="font-size: 14pt; font-family: Krub;">The home may need to be modified for wheelchair accessibility or safety precautions.</span></div>
      </td>
    </tr>
    <tr>
      <td class="protd">
        <div class="col1"><span class="pli">5</span></div>
        <div class="col2"><span style="font-size: 14pt; font-family: Krub;">Home care can cheaper depending on the skill level required and services can be combined to lower costs.</span></div>
      </td>
      <td class="contd">
        <div class="col1"><span class="cli">5</span></div>
        <div class="col2"><span style="font-size: 14pt; font-family: Krub;">Fewer social activities may take place as opposed to care homes and facilities.</span></div>
      </td>
    </tr>
  </tbody>
</table>
</div>
<div class="col-md-6" style="width: 2%;"></div>
<div class="col-md-6" style="width: 70%;">
  <h2 style="text-align: center;"><span style="color: #2b6a83; font-family: Krub;">Assisted Living</span></h2>
  <table id="table2">
    <tbody>
      <tr>
        <th style="text-align: center; font-weight: 500; color: #ffffff; font-size: 24pt; font-family: Krub; background-color: #2b6a83; padding: 0px;">Pros</th>
        <th style="font-weight: 500; font-size: 24pt; font-family: Krub; color: #ffffff; background-color: #e9736a; padding: 0px; text-align: center;">Cons</th>
      </tr>
      <tr>
        <td class="protd">
          <div class="col1"><span class="pli">1</span></div>
          <div class="col2"><span style="font-size: 14pt; font-family: Krub;">More affordable when 24/7 care is required.</span></div>
        </td>
        <td class="contd">
          <div class="col1"><span class="cli">1</span></div>
          <div class="col2"><span style="font-size: 14pt; font-family: Krub;">Longer wait times to get admitted into an assisted living facility.</span></div>
        </td>
      </tr>
      <tr>
        <td class="protd">
          <div class="col1"><span class="pli">2</span></div>
          <div class="col2"><span style="font-size: 14pt; font-family: Krub;">Allows the family to focus more on their relationship with their loved one.</span></div>
        </td>
        <td class="contd">
          <div class="col1"><span class="cli">2</span></div>
          <div class="col2"><span style="font-size: 14pt; font-family: Krub;">Frequent changes to the staff mean one-on-care won’t be as consistent.</span></div>
        </td>
      </tr>
      <tr>
        <td class="protd">
          <div class="col1"><span class="pli">3</span></div>
          <div class="col2"><span style="font-size: 14pt; font-family: Krub;">Residents have ample opportunities to socialize with others.</span></div>
        </td>
        <td class="contd">
          <div class="col1"><span class="cli">3</span></div>
          <div class="col2"><span style="font-size: 14pt; font-family: Krub;">The quality of care can differ depending on the various care workers.</span></div>
        </td>
      </tr>
      <tr>
        <td class="protd">
          <div class="col1"><span class="pli">4</span></div>
          <div class="col2"><span style="font-size: 14pt; font-family: Krub;">Family will not have to manage, schedule or hire care providers.</span></div>
        </td>
        <td class="contd">
          <div class="col1"><span class="cli">4</span></div>
          <div class="col2"><span style="font-size: 14pt; font-family: Krub;">Residents may get kicked out of their assisted living home with little to no advanced notice.</span></div>
        </td>
      </tr>
      <tr>
        <td class="protd">
          <div class="col1"><span class="pli">5</span></div>
          <div class="col2"><span style="font-size: 14pt; font-family: Krub;">The level of care can easily be increased as necessary.</span></div>
        </td>
        <td class="contd">
          <div class="col1"><span class="cli">5</span></div>
          <div class="col2"><span style="font-size: 14pt; font-family: Krub;">Your loved one may simply not enjoy living in a group environment.</span></div>
        </td>
      </tr>
    </tbody>
  </table>