Aspro இல்: அடுத்து, பதிப்பு 1.1.7 இலிருந்து தொடங்கி, நீங்கள் அட்டவணைகளை மாற்றியமைக்கலாம் மொபைல் பதிப்பு. மாற்றங்கள் செய்யப்பட வேண்டும் ஆதாரம்பக்கங்கள் - அட்டவணைகளின் பொருந்தக்கூடிய தன்மைக்கு பொறுப்பான ஒரு வகுப்பைச் சேர்க்கவும்.

மொபைல் பதிப்பில் ஒரு எளிய அட்டவணை பக்கத்திற்கு அப்பால் நீண்டுள்ளது.

அட்டவணையை பதிலளிக்கக்கூடியதாக மாற்ற, அட்டவணை சேர்க்கப்பட்ட பக்கத்தைத் திருத்தச் செல்லவும். பின்னர் மூல குறியீடு எடிட்டிங் பயன்முறைக்குச் செல்லவும்.

தொடக்க குறிச்சொல்லுக்கு முன்

வகுப்பில் ஒரு குறிச்சொல்லைச் சேர்க்கவும்.

நிறைவு குறிச்சொல்லுக்குப் பிறகு

குறிச்சொல்லை உள்ளிடவும்.

...

உங்கள் மாற்றங்களைச் சேமிக்கவும்.

இப்போது அட்டவணை உருட்டுகிறது மற்றும் சட்டத்திற்கு அப்பால் செல்லாது.

கிடைமட்டமாக ஸ்க்ரோலிங் செய்யும் போது, ​​அட்டவணை சட்டத்திற்கு அப்பால் செல்லாது, ஆனால் மொபைல் பதிப்பில் வலதுபுறமாக ஸ்க்ரோல் செய்யும் போது, ​​ஒரு பக்க மெனு திறக்கிறது. அட்டவணையுடன் வேலை செய்வதில் மெனு தலையிடாது என்பதை உறுதிப்படுத்த, நீங்கள் பக்கக் குறியீட்டில் மாற்றங்களைச் செய்ய வேண்டும்.

நாம் முன்பு சேர்த்த குறிச்சொல்லில் "swipeignore" வகுப்பைச் சேர்க்க வேண்டும். இதன் விளைவாக, குறிச்சொல்லுக்கு முன்

வகுப்புகளுடன் ஒரு குறிச்சொல் குறிப்பிடப்பட வேண்டும்.

...

உங்கள் மாற்றங்களைச் சேமிக்கவும்.

இப்போது, ​​அட்டவணையை வலதுபுறமாக ஸ்க்ரோல் செய்யும் போது, ​​பக்க மெனு திறக்கவில்லை, இது அட்டவணையுடன் வேலை செய்வதில் குறுக்கிடுகிறது.

வலதுபுறம் மற்றும் பிற பக்கங்களில் ஸ்க்ரோல் செய்யும் போது பக்க மெனுவை மறைக்கலாம். பக்க மெனு காட்சியை அகற்ற விரும்பும் பிளாக் டேக்கில் “swipeignore” வகுப்பைச் சேர்க்க வேண்டும். குறிச்சொல்லில் வகுப்பு குறிப்பிடப்படவில்லை எனில், அது படிவத்தை எடுக்கும். குறிச்சொல்லில் ஏற்கனவே வகுப்புகள் சேர்க்கப்பட்டிருந்தால், "swipeignore" என்று ஒரு இடைவெளியால் பிரிக்கப்பட்டதாக எழுதவும், எடுத்துக்காட்டாக .

உங்கள் இணையதளத்தில் டேபிள்களைப் பயன்படுத்தினால், அவற்றையும் மாற்றியமைக்க வேண்டும் மொபைல் சாதனங்கள். நான் இரண்டு தழுவல் விருப்பங்களைப் பயன்படுத்துகிறேன் - சுருக்கம் மற்றும் சொல் மடக்குதல் + ஒரு நெடுவரிசையில் அட்டவணைகளை ஏற்பாடு செய்தல்.

முதல் விருப்பம் அனைத்து பல நெடுவரிசை அட்டவணைகளுக்கும் ஏற்றது, இரண்டாவது விருப்பம் தளத்தில் சில தளங்களில் நான் பயன்படுத்துகிறேன். அட்டவணை வடிவத்தில் மெனுக்களைக் காண்பிப்பதில் அத்தகைய பலவீனம் உள்ளது, ஆனால் தீர்மானம் குறைக்கப்படும்போது, ​​​​அவை மிகவும் சுருக்கப்பட்டு பயனர் மத்தியில் கோபத்தை ஏற்படுத்துகின்றன. ஒரு நெடுவரிசையில் குறைந்த தெளிவுத்திறனில் மொழிபெயர்ப்பு - நல்ல முடிவு, ஆனால், மீண்டும், நீங்கள் அதை எல்லா அட்டவணைகளுக்கும் பயன்படுத்தக்கூடாது.

அடிப்படை விருப்பம்

எனவே, தளத்தில் உள்ள பெரும்பாலான அட்டவணைகளுக்கு நான் பின்வரும் css குறியீட்டைப் பயன்படுத்துகிறேன்:

@மீடியா திரை மற்றும் (அதிகபட்ச அகலம்:1000px)(td(word-break:break-all;)

தொகுதிக்குள் பொருந்தாத சொற்கள் 1000 px க்கும் குறைவான தெளிவுத்திறனுடன் தொடங்க வேண்டும் என்று இது குறிப்பிடுகிறது. புதிய கோடு. தெளிவுத்திறன் 1000 ஒரு எடுத்துக்காட்டு, உங்கள் தளங்களைப் பாருங்கள், சிலருக்கு தெளிவுத்திறனைக் குறைவாக அமைப்பது அர்த்தமுள்ளதாக இருக்கும்.

சாதிக்க நல்ல காட்சி CSS இல் இரட்டைக் குறியீட்டைப் பயன்படுத்தி அட்டவணை சாத்தியமாகும். நான் இணையாகப் பயன்படுத்துகிறேன்:

@மீடியா திரை மற்றும் (அதிகபட்ச அகலம்:700px)(img(அதிகபட்ச அகலம்:96% !முக்கியம்; உயரம்:தானாக 99% !முக்கியம்;) டேபிள், span, div, ins(அதிகபட்ச அகலம்:100% !முக்கியம்;)

700 px க்கும் குறைவான தெளிவுத்திறனுடன், அட்டவணை 100% அளவில் காட்டப்படும், அதாவது, அது சுருக்கப்பட்டுள்ளது, ஆனால் முழு தொகுதியையும் அகலத்தில் ஆக்கிரமித்துள்ளது. 700px ஐ விட சிறிய அனைத்து தீர்மானங்களுக்கும் இது பொருந்தும் என்பதை தி!முக்கியமான சொத்து குறிக்கிறது.

ஒரு நெடுவரிசை தழுவல்

அட்டவணையை மாற்றியமைப்பது மிகவும் கடினம், அதனால் அது ஒரு நெடுவரிசையில் குறைந்த தெளிவுத்திறனில் காட்டப்படும். எல்லா அட்டவணைகளுக்கும் பொருந்தாது, ஆனால் பெரும்பாலும் அவசியம். முதலில், அட்டவணைக்கான அசல் வகுப்பைக் குறிப்பிடவும், எடுத்துக்காட்டாக,