réactif tableau avec plusieurs colonnes dans le bootstrap

J'ai essayé de trouver une réponse pour "nième" nombre de colonnes dans une table de bootstrap. Certains gars demandé avant, mais encore il n'y a pas de solution. Donc, ma question est de savoir comment gérer avec la réactivité de colonnes. Disons que j'ai 5 colunms avec son propre nom.
| les rues les noms de | Victoria | Lombard | Champs-Elysées | Chervonoarmeyskaya |
(sans abréviation, comme un lecteur a comprendre)

Ma solution:

a) Jouer avec la taille de police, les rendant plus petites pour s'adapter à 320px taille. mais réussir à 480px (au moins pour une taille lisible).

b) en Enlevant tout le rembourrage à l' ".tableau thead > tr > th .table tbody > tr > th," avec @media (max-width: 480px) pour obtenir plus d'espace.

c) et la dernière consiste à ajouter une condition comme (commutation automatique de la taille de l'écran si "320px, 360px" sur "480px, 640px").

Je ne sais pas si c'est une bonne idée?

ça va fonctionner correctement sur tous les petits appareils comme l'iphone, ipod, samsung ..., nokia ..., sony etc... avec la compatibilité inter-navigateur? si oui, comment en rendre compte?

voici mon code:

<table class="table table-responsive">
    <table class="table table-striped table-bordered">
        <thead>
            <tr class="alert alert-info">
                <th>the streets' names</th>
                <th>Victoria</th>
                <th>Lombard</th>
                <th>Champs-Elysées</th>
                <th>Chervonoarmeyskaya</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Location</td>
                <td>Australia</td>
                <td>United States</td>
                <td>France</td>
                <td>Ukraine</td>
            </tr>
        </tbody>
    </table>
</table>

P. S. Si quelqu'un va trouver une solution, considérer au sujet de 7 à 10 colonnes. Merci.