JSFiddle - React, Tailwind, and code Playground

by TheBuzzer

HTML

<table width="100%" id="table1">
    <tr>
        <td width="33%" id="Clo1" align="center">Colonne 1</td>
        <td width="34%" id="Clo2" align="center">Colonne 2</td>
        <td width="33%" id="Clo3" align="center">Colonne 3</td>
    </tr>
    <tr>
        <td width="33%" id="Col1" align="center">Colonne 1</td>
        <td width="34%" id="Col2" align="center">Colonne 2</td>
        <td width="33%" id="Col3" align="center">Colonne 3</td>
    </tr>
</table>
<input id="Button1" type="button" value="Retire Colonne" />
<input id="Button2" type="button" value="Ajoute Colonne" />

JavaScript

$('#Button1').unbind('click').bind('click', function(e) {
    $('#Col3').css('display', 'none');
    $('#Col1').attr('colspan', 1.5);
    $('#Col1').css('width', '50%');
    $('#Col2').css('width', '50%');
});
$('#Button2').unbind('click').bind('click', function(e) {
    $('#Col3').css('display', 'table-cell');
    $('#Col1').removeAttr('colspan');
    $('#Col3').css('width', '33%');
    $('#Col2').css('width', '34%');
    $('#Col1').css('width', '33%');
});