Robię stronę responsywną i dla małego ekranu potrzebuję w tabeli komórkę A ustawić na 70% szerokości tabeli a komórkę B ustawić na pozostałe 30% tabeli.
Poniższy html + css niestety nie działa:

[HTML] pobierz, plaintext 
        <table style="width: 100%;">
            <tr style="display: block;background-color: red;">
                <td style="background-color: blue;width: 70%;">A</td>
                <td style="background-color: green;width: 30%;">B</td>
            </tr>
            <tr style="display: block;background-color: red;">
                <td style="background-color: blue;width: 70%;">A</td>
                <td style="background-color: green;width: 30%;">B</td>
            </tr>
        </table>
[HTML] pobierz, plaintext 

Próbowałem też na tabeli ustawić właściwość table-layout: fixed; ale też nie działa.

Co robię źle ?

PS. Celowo style css wrzuciłem wprost do tagów html.

Wyrzuć display z row.

Usunięcie display nic nie dało

[HTML] pobierz, plaintext 
        <table style="width: 100%;">
            <tr style="background-color: red;">
                <td style="background-color: blue;width: 70%;">A</td>
                <td style="background-color: green;width: 30%;">B</td>
            </tr>
            <tr style="background-color: red;">
                <td style="background-color: blue;width: 70%;">A</td>
                <td style="background-color: green;width: 30%;">B</td>
            </tr>
        </table>
[HTML] pobierz, plaintext 

Nie działa? https://jsfiddle.net/4rytxzkq/

ok działa ... trochę źle testowłem bo we frameworku SYMFONY w nowym kontrolerze w szablonie TWIG gdzie kod umieściłem w sekcji, która ma dostęp do innych styli CSS które pewnie nadpisały ustawienia:

[HTML] pobierz, plaintext 
{% extends 'base.html.twig' %}
{% block content %}
...
{% endblock %}
[HTML] pobierz, plaintext 

Sprawdziłem na innym projekcie i działa.



Dzięki