不同尺寸的分离器

Question

如下例所示，是否可以分离不同的尺寸

PlunkerDemo

<tr class="foo">
    <td>
        <div>
            <p>
            <span class="departureTime">03h00</span>
             <span>New-York</span>
            </p>
             <p class="espacement_important">
                <span class="arrivalTime">15h00</span>
                <span>Bahamas</span>
            </p>

            <p class="duration espacement_important"><span >8h00</span>
                <span>2 correspond.</span>
                <span>A380</span>
            </p>
          </div>
        </td>
      <td class="unavailable">indisponible</td>

    <td><input type="radio" />
        <label >10.00 €</label>
    </td>
    <td><input type="radio" />
        <label >50.00 €</label>
    </td>
</tr>

Answer 1

您可以执行pseudo-elemnts：

首先为您的td元素分配名称类，例如long和short：

<td class="long">
  <div>
    <p>
      <span class="departureTime">03h00</span>
      <span>New-York</span>
    </p>
    <p class="espacement_important">
      <span class="arrivalTime">15h00</span>
      <span>Bahamas</span>
    </p>

    <p class="duration espacement_important"><span>8h00</span>
      <span>2 correspond.</span>
      <span>A380</span>
    </p>
  </div>
</td>
<td class="unavailable">indisponible</td>

<td class="short">
  <input type="radio" />
  <label>10.00 €</label>
</td>

然后像这样使用CSS：

.long {
  position:relative;
}
.long:after {
  content:" ";
  height:80%;
  border-right:1px solid #eee;
  position:Absolute;
  right:0;
  top:10%;
}
.short {
  position:relative;
}
.short:after, .short:before {
  content:" ";
  height:40%;
  border-right:1px solid #eee;
  position:Absolute;
  right:0;
  top:30%;
}
.short:before {
  left:0;
  right:auto;
}

PlunkerDemo

---

如果您想避免使用类名，可以使用nth-child，但仅限于您的需要

Answer 2

请参阅以下方法并根据需要进行调整。也适用于DIV

table {
  border: none;
  border-collapse: #EEEEEE;
  }

tr {
  border: solid 1px #5E6977;
  display: block;
  margin-bottom: 10px;
  min-height: 60px;
  width: 500px;
  padding: 5px;
  }

tr.no-border  {
  border: none;
  border-bottom: solid 1px #5E6977; 
  }

th {
  line-height: 60px;
  border: none;
  width:  160px;
  }

td {
  border: none;
  width: 160px;
  height: 60px;
   position: relative;
  }

td:last-of-type {
  border-right: none;
 
}

td:nth-of-type(1):after {
  content:'';
  border-right: solid 1px #5E6977;
  position: relative;
  width: 160px;
  min-height: 30px;
  display: table;
  background: transparent;
  top: 1%;
  line-height: 60px;
}

td:nth-of-type(2):after {
  content:'';
  border-right: solid 1px #5E6977;
  line-height: 60px;
  position: absolute;
  width: 160px;
  min-height: 50px;
  display: table;
  background: transparent;
  top: 10%;
}

<table width="200" border="1">
  <tbody>
     <tr class="no-border">
    <th>Month</th>
    <th>Savings</th>
       <th>Savings</th>
  </tr>
    
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
     
    </tr>
  </tbody>
</table>

Answer 3

支持跨浏览器。简约新行。

...
<td>
    <div style="width:1px;height:91px;background:green;"></div>
</td>
<td class="unavailable">indisponible</td>
<td>
    <div style="width:1px;height:91px;background:green;"></div>
</td>
<td>
    <input type="radio" />
    <label >10.00 €</label>
</td>
...