Mobile optimiser site basé sur une table?

Question

J'ai été mandaté pour mobile optimisé un site avec des requêtes de médias pour charger CSS spécifique sur les navigateurs plus étroits. Je viens de remarquer cependant que le site est construit avec des tables CSS non appropriées. Je connais toutes les raisons pour lesquelles la construction d'un site avec des tables est une idée terrible, mais y a-t-il un travail qui me permettra de casser la table en une seule colonne avec CSS?

Answer 1

Cela pourrait être une tâche difficile. Selon les navigateurs mobiles que vous ciblez et en fonction du marquage utilisé (y a-t-il d'autres tableaux présents? Pouvez-vous cibler les tableaux de mise en page appropriés, etc.), alors je suggère de définir la propriété d'affichage pour le layout TD à bloquer pour vous permettre de les libérer des contraintes de la table. CSS comme l'extrait ci-dessous devrait faire l'affaire dans les navigateurs mobiles modernes, mais vous devriez envisager de cibler les éléments visés plus précisément si possible, afin de ne pas affecter les autres tables.

table, tr, td { 
    display: block; 
} 

Une fois que vous avez défini les éléments de table pour bloquer, vous devriez alors être en mesure de style et les positionner comme nécessaire pour la mise en page mobile.