Separator of different sizes - html

Question

Is it possible to have separator of diferent sizes as the example below
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

You can do this usign pseudo-elemnts:
First assign name classes to your td elements like long and 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>
Then use CSS like this:
.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
If you want to avoid the classnames you can use nth-child but only if suits your needs

Answer 2

See the method below and adjust as needed. Will work with a DIV also
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> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>

Answer 3

support cross browser. simplicity new row.
...
<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>
...