एक वेबसाइट मैं निर्माण कर रहा हूँ पर एक पृष्ठ पर, वहाँ केवल एक मेज प्रदर्शित किया जाएगा। मैं उस तालिका को स्क्रीन की चौड़ाई/ऊंचाई के बावजूद स्क्रीन के किनारों पर चिपकना चाहता हूं।क्षैतिज और चिपचिपा/तय हेडर के साथ खड़ी उत्तरदायी तालिका?
इस तालिका में चिपचिपा/निश्चित शीर्षलेख भी हैं (इसलिए जब वे नीचे स्क्रॉल करते हैं, हेडर अभी भी दिखाई दे रहे हैं), जो मुझे चीजों को जटिल बनाते हैं क्योंकि चौड़ाई और ऊंचाई को मैन्युअल रूप से सेट करने की आवश्यकता होती है।
इसके अलावा, यह क्षैतिज स्क्रॉल मामले में स्तंभों की एक टन है वहाँ होना करने में सक्षम होने की जरूरत है। मैं उन सभी 10px विस्तृत होने के लिए नहीं करना चाहते, लेकिन तालिका में ही अभी भी स्क्रीन के किनारों से चिपक आयाम बदलने के रूप में की जरूरत है।
यह हेडर उपयोगकर्ता स्क्रॉल के रूप में चिपचिपा रखने के साथ काम करता है, लेकिन चौड़ाई और तत्वों की ऊंचाई सभी, मैन्युअल रूप से स्थापित किया जाना है जो इसे जो भी उत्तरदायी नहीं है इसका मतलब है।
बिल्कुल यह संभव है? मैं जावास्क्रिप्ट के विपरीत नहीं हूं, लेकिन एक शुद्ध सीएसएस समाधान थोड़ा पसंदीदा होगा।
(JSFiddle)
body {
margin: 0;
padding: 0;
}
table {
table-layout: fixed;
border-collapse: collapse;
width: 375px;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
-webkit-border-horizontal-spacing: 0;
}
th,
td {
text-align: left;
padding: 10px 10px;
width: 105px;
word-wrap: break-word;
word-break: break-all;
-webkit-hyphens: auto;
hyphens: auto;
}
thead {
background-color: black;
color: #fff;
}
thead tr {
display: block;
position: relative;
}
tbody {
display: block;
overflow: auto;
height: 300px;
}<table>
<thead>
<tr>
<th>Longer title for testing</th>
<th>Color</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>Apple ioeras eionars ienraist eioarn stio enar sotinera oietnar i i i i i i i i i i i i i i i i i i i i i to</td>
<td>Red aeinrs tienras tienr eiostnnearhstniehrastneihrsaetinh iaroes nte narse itnar einaer ns eanr enrsena ernes netnea rnst sr</td>
<td>These are red.</td>
</tr>
<tr>
<td>Pear</td>
<td>Green</td>
<td>These are green.</td>
</tr>
<tr>
<td>Grape</td>
<td>Purple/Green</td>
<td>These are purple and green.</td>
</tr>
<tr>
<td>Orange</td>
<td>Orange</td>
<td>These are orange.</td>
</tr>
<tr>
<td>Banana</td>
<td>Yellow</td>
<td>These are yellow.</td>
</tr>
<tr>
<td>Kiwi</td>
<td>Green</td>
<td>These are green.</td>
</tr>
<tr>
<td>Plum</td>
<td>Purple</td>
<td>These are Purple</td>
</tr>
<tr>
<td>Watermelon</td>
<td>Red</td>
<td>These are red.</td>
</tr>
<tr>
<td>Tomato</td>
<td>Red</td>
<td>These are red.</td>
</tr>
<tr>
<td>Cherry</td>
<td>Red</td>
<td>These are red.</td>
</tr>
<tr>
<td>Cantelope</td>
<td>Orange</td>
<td>These are orange inside.</td>
</tr>
<tr>
<td>Honeydew</td>
<td>Green</td>
<td>These are green inside.</td>
</tr>
<tr>
<td>Papaya</td>
<td>Green</td>
<td>These are green.</td>
</tr>
<tr>
<td>Raspberry</td>
<td>Red</td>
<td>These are red.</td>
</tr>
<tr>
<td>Blueberry</td>
<td>Blue</td>
<td>These are blue.</td>
</tr>
<tr>
<td>Mango</td>
<td>Orange</td>
<td>These are orange.</td>
</tr>
<tr>
<td>Passion Fruit</td>
<td>Green</td>
<td>These are green.</td>
</tr>
</tbody>
</table>
कृपया [संपादित करें]। कोड-केवल उत्तर [निराश] (http://meta.stackexchange.com/questions/196187) हैं, क्योंकि उनमें कोई खोज योग्य सामग्री नहीं है, और यह समझाएं कि किसी को "इसे आजमाएं" क्यों चाहिए। हम ज्ञान के लिए संसाधन बनने के लिए यहां एक प्रयास करते हैं। – Mogsdad
मुझे लगता है कि टेबल उत्तरदायी बनाना यहां बिंदु नहीं है। यह आसान है। लेकिन शीर्षलेख क्षैतिज रिश्तेदार और लंबवत रूप से तय करना कुछ कठिन है। –