Discussion :

[kohsaka]

Bonjour à tous,

Tout d'abord, désolé pour le titre de mon topic, il n'est pas très parlant...

J'ai un tableau un peu particulier à intégrer, et ma foi, je n'ai pas trop d'idées sur comment le réaliser. Une image étant surement plus parlante que de longues explications, n’hésitez pas à checker la pièce jointe

Mon soucis se situe au niveau de la partie orange :
Comment faire pour que cette zone prenne la taille des 2 colonnes en dessous et en même temps passe en dessous de ces même cellules.
On considère que la taille des colonnes sont extensibles.

code html

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
<table>
    <thead>
        <tr>
           <td>col 01</td>
           <td colspan="2">zone orange</td>
           <td>col 03</td>
        </tr>
        <tr>
            <td>col 01</td>
            <td></td>
            <td></td>
            <td>col 03</td>
        </tr>
    </thead>
</table>

le code html est celui d'une ancienne version du tableau que je dois remanier, il est possible de le changer.

les bords arrondis sont fait avec la propriété border-radius sur le td, le but ultime étant d'avoir une solution full html/css, sans image, ni js.

Des propositions ?

Merci