एक निश्चित हेडर पंक्ति और पहले कॉलम के साथ एक वास्तविक शुद्ध सीएसएस समाधान
मुझे शुद्ध सीएसएस का उपयोग करते हुए एक निश्चित हेडर और एक निश्चित पहले कॉलम के साथ एक तालिका बनानी थी और यहाँ कोई भी उत्तर मुझे पसंद नहीं था।
position: stickyसंपत्ति शीर्ष करने के लिए दोनों चिपका का समर्थन करता है (जैसा कि मैंने देखा है यह सबसे अधिक इस्तेमाल किया) और क्रोम, फायरफॉक्स, और एज के आधुनिक संस्करणों में ओर करने के लिए। इसे आपके पास एक निश्चित तालिका के साथ एक तालिका देने के divलिए overflow: scrollसंपत्ति हो सकती है जिसे आपके पृष्ठ पर कहीं भी रखा जा सकता है:
एक कंटेनर में अपनी मेज रखें:
<div class="container">
<table></table>
</div>
overflow: scrollस्क्रॉलिंग सक्षम करने के लिए अपने कंटेनर पर उपयोग करें :
div.container {
overflow: scroll;
}
जैसा कि डागमार ने टिप्पणियों में बताया है, कंटेनर को भी ए max-widthऔर ए की आवश्यकता होती है max-height।
का प्रयोग करें position: stickyतालिका सेल के लिए स्टिक और किनारे तक top, rightया leftकरने के लिए छड़ी करने के लिए जो बढ़त चुनने के लिए:
thead th {
position: -webkit-sticky; /* for Safari */
position: sticky;
top: 0;
}
tbody th {
position: -webkit-sticky; /* for Safari */
position: sticky;
left: 0;
}
जैसा कि MarredCheese ने टिप्पणियों में उल्लेख किया है, यदि आपके पहले कॉलम में <td>तत्वों के बजाय <th>तत्व हैं, तो आप tbody td:first-childइसके बजाय अपने CSS में उपयोग कर सकते हैंtbody th
पहले कॉलम स्टिक में बाईं ओर हैडर का उपयोग करने के लिए:
thead th:first-child {
left: 0;
z-index: 1;
}
/* Use overflow:scroll on your container to enable scrolling: */
div {
max-width: 400px;
max-height: 150px;
overflow: scroll;
}
/* Use position: sticky to have it stick to the edge
* and top, right, or left to choose which edge to stick to: */
thead th {
position: -webkit-sticky; /* for Safari */
position: sticky;
top: 0;
}
tbody th {
position: -webkit-sticky; /* for Safari */
position: sticky;
left: 0;
}
/* To have the header in the first column stick to the left: */
thead th:first-child {
left: 0;
z-index: 2;
}
/* Just to display it nicely: */
thead th {
background: #000;
color: #FFF;
/* Ensure this stays above the emulated border right in tbody th {}: */
z-index: 1;
}
tbody th {
background: #FFF;
border-right: 1px solid #CCC;
/* Browsers tend to drop borders on sticky elements, so we emulate the border-right using a box-shadow to ensure it stays: */
box-shadow: 1px 0 0 0 #ccc;
}
table {
border-collapse: collapse;
}
td,
th {
padding: 0.5em;
}
<div>
<table>
<thead>
<tr>
<th></th>
<th>headheadhead</th>
<th>headheadhead</th>
<th>headheadhead</th>
<th>headheadhead</th>
<th>headheadhead</th>
<th>headheadhead</th>
<th>headheadhead</th>
</tr>
</thead>
<tbody>
<tr>
<th>head</th>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
</tr>
<tr>
<th>head</th>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
</tr>
<tr>
<th>head</th>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
</tr>
<tr>
<th>head</th>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
</tr>
<tr>
<th>head</th>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
</tr>
<tr>
<th>head</th>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
</tr>
</tbody>
</table>
</div>
https://jsfiddle.net/qwubvg9m/1/
