मुझे table का उपयोग करके टैब्यूलर डेटा दिखाने की आवश्यकता है, लेकिन यह तरल लेआउट के भीतर होगा; मैं इसे पूरी उपलब्ध चौड़ाई भरना चाहता हूं लेकिन अधिकतम स्क्रीन-चौड़ाई से क्षैतिज रूप से विस्तार नहीं करना चाहता, जैसे कि body क्षैतिज स्क्रॉलबार नहीं मिलता है। इसके बजाए बहुत व्यापक td तत्व स्क्रॉलबार प्राप्त करेंगे।मैं तालिका चौड़ाई को तत्व (या स्क्रीन) में कैसे सीमित करूं?
उदाहरण में वहाँ table में DATA है, tableborder:1px solid black है और जब रूप में अच्छी तरह (इसलिए white-space:pre) कर्ल से पहुंचाया उत्पादन आसान पार्सिंग के लिए होगा; div केवल सामान्य सीएसएस लेआउट सहायक है, यदि संभव हो तो चलो उससे छुटकारा पाएं!
महत्वपूर्ण हिस्सा है कि यह कोई निश्चित पिक्सेल चौड़ाई लेआउट प्रकार किया जाएगा, और table मामले डेटा में उपलब्ध चौड़ाई की तुलना में छोटे होंगे इतना कक्ष जरूरत नहीं है। तो इसे समेटने के लिए, एक सादा तालिका जो स्क्रीन से अधिक व्यापक नहीं होती है। आदर्श रूप से table तब तक केवल माता-पिता तत्व को तब तक फैलाएगा जब तक कि उस संलग्न तत्व के max-width तक पहुंच न जाए और फिर व्यापक न हो।
Chrome में, कुछ के साथ मैं एक बुराई हैक करने पर विचार, मैं अधिकतम चौड़ाई उपलब्ध पर table रखने के लिए और यदि आवश्यक हो td पर स्क्रॉलबार प्रदर्शित करने के लिए मिला है। हालांकि यह एफएफ के लिए काम नहीं करता है, न ही वह समाधान कुछ है जिसे सही माना जा सकता है।
इस बात का उदाहरण के बाद थोड़ी देर के लिए https://hydra.geht.net/table-quirx.html में पाया जा सकता:
<head>
<title>Obey max-width for table</title>
<style>
.nw { white-space:nowrap }
.quirx div { width:100%; max-width:100%; white-space:pre }
.quirx td { max-width:90px; border:1px solid black }
.quirx td+td { max-width:500px; overflow:auto }
table.quirx { width:100%; max-width:100%; border:1px solid black; border-collapse:collapse }
td { align:left; max-width:100% }
</style>
</head>
<body>
<table summary="" class="quirx"><tr><td colspan="3">
Just some info
</td></tr><tr><td>KEY</td><td><div>DATA (which might contain long lines PRE formatted) XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX </div>
</td></tr></table>
</body>
</html>
ध्यान दें कि "colspan = 3" कोई त्रुटि यहाँ मेरे एप्लिकेशन में, कभी कभी एक तीसरे स्तंभ में नज़र आ सकते, यह नहीं कर सकते table हेडर आउटपुट के समय ज्ञात हो। (कुछ शैली बातें बेमानी भी हैं।)
चाल से ऊपर, कि td के max-width एक साथ हमेशा की तरह स्क्रीन (590px) और table तो दिया width तक फैला है, 100% है जो तुलना में छोटे होते । चूंकि td एस स्क्रीन से बाहर नहीं फैलता है, आंतरिक div की overflow संपत्ति अपेक्षा के अनुसार काम कर सकती है। हालांकि एफएफ में यह इस तरह से काम नहीं करता है, न तो width और न ही max-width (जो शायद उनके inline -स्टैटस के कारण है) के साथ काम नहीं करता है। Chromewidth:100% या इसी तरह td पर और न ही tr तत्वों पर काम नहीं करता है। ध्यान दें कि max-width के साथ width (मुझे उस अंतर को समझ में नहीं आता है) की तुलना में अधिक सुखद टेबल लेआउट मिलता है।
Chrome में काम करता है, एक और बग है, कि
table पूर्ण स्क्रीन-चौड़ाई है कि भले ही अगर वहाँ
डेटा प्रदर्शित करने के लिए केवल छोटे है की जरूरत नहीं है का उपयोग करता है इसके अलावा
।सब के बारे में
कुछ नोट:
- मुझे लगता है कि यह यहाँ एक बहुत ही बुनियादी बात है और मैं हैरान हूँ क्यों यह सीएसएस के साथ व्यक्त करने के लिए इतनी मेहनत लगती
- एक लक्ष्य यह किसी भी मुक्त रखने के लिए है जावास्क्रिप्ट, इसलिए केवल हैक्स के साथ सीएसएस
- उपयोगकर्ता 1920px करने के लिए 800px से उदाहरण के लिए विंडो का आकार बदलने कर सकते हैं, या यहां तक कि व्यापक है, और इसलिए
tableकी चौड़ाई स्वचालित रूप से (जावास्क्रिप्ट के बिना) का पालन करेगा - यह पाठ पर अच्छा प्रदर्शित करेगा आधारित ब्राउज़र जैसे
Lynxऔरw3mभी - आउटपुट आसान पार्सिंग के लिए भी अव्यवस्थित जब
curl - से पहुंचाया यह प्रमुख 4 पर ठीक से अधिक या कम प्रदर्शित करेगा नहीं होगा (आईई, एफएफ, क्रोम, सफारी)
- यह नहीं किया जाएगा दूसरों पर तोड़ें (यह बग प्रस्तुत कर सकता है, लेकिन सामग्री छिपी नहीं जानी चाहिए)
मुझे वास्तव में यह नहीं पता कि उसे कैसे संग्रहीत किया जाए। शायद यह एक एफएक्यू है, लेकिन मैं खुद को एक समाधान खोजने में असमर्थ था।
यह उपयोगी था। मैं मुद्दों में भाग रहा हूं और टेबल-लेआउट खेलने पर प्रतीत होता है। धन्यवाद – huyz
यह अविश्वसनीय रूप से उपयोगी है, धन्यवाद दोस्त –