CODEWITHSUNDEEP
htmlcss
Mercer
Mercer

Reputation: 9986

Separator of different sizes

Is it possible to have separator of diferent sizes as the example below

enter image description here

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>

Upvotes: 3

Views: 65

Answers (3)

Sleek Geek
Sleek Geek

Reputation: 4686

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>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
     
    </tr>
  </tbody>
</table>

Upvotes: 1

alessandrio
alessandrio

Reputation: 4370

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>
...

Upvotes: 0

DaniP
DaniP

Reputation: 38262

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

Upvotes: 1

Related Questions