Table cell with two colour background – HTML & CSS – no script
Having a hard time creating a table cell with two colour background using only HTML & CSS and no script?
Here is an example that should sort you out…
The HTML
<table> <tr> <td>cell 1</td> <td>cell 2</td> </tr> <tr> <td>cell 3</td> <td> <div class="positioning"> <div class="bg pink"></div> <div class="bg green"></div> <div class="content"> Hi </div> </div> </td> </tr> </table>
The CSS
table{ border-collapse:collapse } table td{ background:#f0f0f0; padding:0; border:1px solid #ccc; font-size: 50px; } .positioning{ position:relative; } .bg{ position: absolute; width:50%; top: 0; bottom: 0; } .pink{ background:#d00778; left:0; } .green{ background:#8cce1b; left:50%; } .content{ position:relative; z-index:1; text-align:center; color:#fff; }
Table cell with two colour background
You should now have a table cell with two colour background as below…
cell 1 | cell 2 |
cell 3 |
Hi
|