Forum : Problème de marge sur un contenu dans un tableau

Bonjour,

Voilà mon super tableau c'est exactement le résultat que je souhaite obtenir en plus d'être responsive :
https://imgur.com/HJA2Str

maintenat ne manque plus que la touche final une image lien qui remplir les grandes cellules:
https://imgur.com/nbLt9dK

Oh non catastrophe ! malgré tout mes éfforts je ne parvient pas à viré ses vilaine marge :(

le code HTML sans le lien:

<!DOCTYPE html>
<html>
    <head>
        <title>teste</title>
        <meta charset="utf-8">
        <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
        <link rel="stylesheet" type="text/css" href="css/style.css">
    </head>
    <body>

        <table width="100%" height="100%" border="1">
            <tbody>
                <tr>
                    <td colspan="5" height="70px"><div class="menu">
            <a href="../zouak/" >La compagnie</a><a href="../nos-spectacles/">Nos spectacles</a><a href="../nous-contacter/">Nous contacter</a>
        </div></td>
                </tr>
                <tr>
                    <td>1</td>
                    <td rowspan="2">2</td>
                    <td>3</td>
                    <td>4</td>
                    <td>5</td>
                </tr>
                <tr>
                    <td>6</td>
                    <td>7</td>
                    <td>8</td>
                    <td rowspan="2">9</td>
                </tr>
                <tr>
                    <td>10</td>
                    <td>11</td>
                    <td>12</td>
                    <td>13</td>
                </tr>
                <tr>
                    <td>14</td>
                    <td rowspan="2">15</td>
                    <td>16</td>
                    <td rowspan="2">17</td>
                    <td>18</td>
                </tr>
                <tr>
                    <td rowspan="2">19</td>
                    <td>20</td>
                    <td>21</td>
                </tr>
                <tr>
                    <td>22</td>
                    <td>23</td>
                    <td>24</td>
                    <td>25</td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

Avec le lien:

<!DOCTYPE html>
<html>
    <head>
        <title>teste</title>
        <meta charset="utf-8">
        <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
        <link rel="stylesheet" type="text/css" href="css/style.css">
    </head>
    <body>

        <table width="100%" height="100%" border="1">
            <tbody>
                <tr>
                    <td colspan="5" height="70px"><div class="menu">
            <a href="../zouak/" >La compagnie</a><a href="../nos-spectacles/">Nos spectacles</a><a href="../nous-contacter/">Nous contacter</a>
        </div></td>
                </tr>
                <tr>
                    <td>1</td>
                    <td rowspan="2"><a href="url" ><img src="https://loremflickr.com/390/290"></a></td>
                    <td>3</td>
                    <td>4</td>
                    <td>5</td>
                </tr>
                <tr>
                    <td>6</td>
                    <td>7</td>
                    <td>8</td>
                    <td rowspan="2">9</td>
                </tr>
                <tr>
                    <td>10</td>
                    <td>11</td>
                    <td>12</td>
                    <td>13</td>
                </tr>
                <tr>
                    <td>14</td>
                    <td rowspan="2">15</td>
                    <td>16</td>
                    <td rowspan="2">17</td>
                    <td>18</td>
                </tr>
                <tr>
                    <td rowspan="2">19</td>
                    <td>20</td>
                    <td>21</td>
                </tr>
                <tr>
                    <td>22</td>
                    <td>23</td>
                    <td>24</td>
                    <td>25</td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

Le CSS

html, body
{
    width: 100%;
    height: 100%;
}

div.menu
{ width: 100%; height: 70px; padding: 0 50px;   background-color: #C43100; }

div.menu a:link, div.menu a:visited
{
    display: inline-block;
    font-size: 18px;
    font-weight: bold;
    padding: 20px 20px;
    text-decoration: none;
    color: #fff;
}

div.menu a:hover, div.menu a#hover
{ background-color: #d23f0e; }

table
{
    width: 100%;
    height: 100%;
    border: 1;
}

vavoir

Auteur

Réponse acceptée

EUREKA !

J'ai réussi, mettre l'image en arrière plan de la cellule puis y mettre un lien avec les proprité CSS ci-dessous

code CSS

a.lien_table:link, a.lien_table:hover, a.lien_table:visited
{
    display: table;
    width: 100%;
    height: 100%;
    text-decoration: none;
}

code HTML

<td rowspan="2" style="background-image: url(https://loremflickr.com/390/290);">
                        <a href="#" class="lien_table">&nbsp;</a></td>

Lardio

Salut,
ce que tu veux faire c'est enlever les marges qui sont en haut/droite/bas de la photo ici :
https://imgur.com/nbLt9dK ?

Cdlt

vavoir

Auteur

Bonjour,

Oui exactement, de ce que je comprend les marge provienne de la balise < a > mais impossible de les virés margin 0 padding 0 aucun effet à moins de les compensé négativement margin-top -50px

Solution de contournement qui marche bien c'est de place l'image en background en CSS ne manque qu'a transformé la cellule en lien sans utiliser de JS...

Problème de marge sur un contenu dans un tableau

3 réponses