Tabela i dopasowanie komórki do wielkości obrazka

0

Cześć,
Temat pewnie trywialny ale wszędzie znajduję porady co zrobić aby obrazek dopasował się do komórki ale nigdzie nie ma jak dopasować komórkę do obrazka. Chodzi o to że mam dwie ikonki z social mediami i chcę je umieścić w tabeli jedna obok drugiej. Wielkość obrazka to 35px x 35px. Nie chcę ustawiać wielkości komórki tylko zrobić to tak aby komórka sama automatycznie dopasowała się do obrazka. Próbuję na różne sposoby i cały czas jest źle. Poniżej wersja gdzie obrazek ustawia mi się do wielkości komórki:

<div>
    <table style="border:0; width: 100%">
        <tbody>
            <tr style="border:0;">
                <td style="border:0; ">
                        <img style = "max-width: 100%; height: auto; width: 100%;" title="Facebook" alt="Facebook"
                            src="/images/social_icons/fb_logo.png"><br>
                    </a>
                </td>
                <td style="border:0; ">
                        <img style = "max-width: 100%; height: auto; width: 100%;" title="Instagram" alt="Facebook"
                            src="/images/social_icons/instagram_logo.png"><br>
                    </a>
                </td>
            </tr>
        </tbody>
    </table>
</div>
0

Komórki tabeli dopasowują się do rozmiarów swojej treści.
Ew. + paddingi, ale to można wyłączyć ustawiając box-sizing:border-box;

W załączonym kodzie masz po obrazkach zupełnie zbędne <br> i zupełnie od czapy </a>.

Wywal wszystkie inlinowe style="...", które tam nawciskałeś i będzie oki.

0

No właśnie pierwotnie było bez tych styli, tylko wywalone było obramowanie i niestety też było źle. Tak jest teraz:

<div>
    <table style="border:0;">
        <tbody>
            <tr style="border:0;">
                <td style="border:0;">
                    <img title="Facebook" alt="Facebook"
                        src="/images/social_icons/fb_logo.png">
                    </a>
                </td>
                <td style="border:0;">
                    <img title="Instagram" alt="Facebook"
                        src="/images/social_icons/instagram_logo.png">
                    </a>
                </td>
            </tr>
        </tbody>
    </table>
</div>

A taki jest efekt:

0

Co tu jest źle?

<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
TABLE {
  border:1px solid red;
}

TD {
  border:1px solid green;
}
</style>

</head>
<body>

<div>
    <table>
        <tbody>
            <tr>
                <td>
                    <img title="Facebook" alt="Facebook"
                        src="https://4programmers.net/uploads/photo/5a/5abcd599a84dd.gif">
                    </a>
                </td>
                <td>
                    <img title="Instagram" alt="Facebook"
                        src="https://4programmers.net/uploads/photo/5a/5abcd599a84dd.gif">
                    </a>
                </td>
            </tr>
        </tbody>
    </table>
</div>


</body>
</html>

1 użytkowników online, w tym zalogowanych: 0, gości: 1