css - How to create an element in a HTML table that partially span cells -


i place <div> elements in html table partially span cells in horizontal direction shown in figure below. example, top left red element spans 2015, 2016, , 1/4 of 2017 cells. code snippet below shows elements confined cell, however, know best approach extend them across multiple cells.

note looking html , css not js.

html table timeline

<table border="1" cellpadding="3" cellspacing="0" style="width: 100%">      <colgroup>         <col span="1" style="width: 25%;">         <col span="1" style="width: 25%;">         <col span="1" style="width: 25%;">         <col span="1" style="width: 25%;">      </colgroup>    <tr>      <th>2015</th>      <th>2016</th>       <th>2017</th>      <th>2018</th>    </tr>    <tr>      <td style="text-align: center;"><div style="background: red; border:1px solid black; padding: 2px;">valid for</div></td>      <td></td>       <td></td>      <td style="text-align: center;"><div style="background: red; border:1px solid black; padding: 2px;">valid for</divn></td>    </tr>    <tr>      <td style="text-align: center;"><div style="background-color: blue; border:1px solid black; padding: 2px;">abc</div></td>      <td></td>       <td></td>      <td></td>    </tr>    <tr>      <td style="text-align: center;"><div style="background-color: green; border:1px solid black; padding: 2px;">i have tooltip mouse over</div></td>      <td></td>       <td></td>      <td></td>    </tr>    </table>

i suggest use table calendar grid , put "valid for"-bars in first cell of correspinding row. give table cells (td) position: relative style , bars position: absolute style. calculate , set left , width styles bars accrding calendar.

<table>   <tr>     <td style="position: relative; width: 100px">       <div style="position: absolute; left: 0px; width: 220px;">valid from</div>       <div style="position: absolute; left: 280px; width: 120px;">valid from</div>     </td>     <td style="width: 100px"></td>     <td style="width: 100px"></td>   </tr> </tr> 

Comments

Popular posts from this blog

resizing Telegram inline keyboard -

command line - How can a Python program background itself? -

php - "cURL error 28: Resolving timed out" on Wordpress on Azure App Service on Linux -