I am creating a table using grid, where if the columns are less it should adjust in full width of div and if columns are more there will be minimum width and the div will be scrollable. Now I am facing a problem where the background color for parent div of header items is not getting applied to items outside viewport. Please find the code attached:
.preview-grid {
display: grid;
grid-auto-flow: column;
gap: 2rem;
grid-auto-columns: minmax(150px, auto);
width: 100%;
}
.preview-data {
width: 100%;
}
.table-heading {
text-align: left;
font: normal normal normal 2rem/2.3rem Arial;
letter-spacing: 0px;
color: #000000CC;
opacity: 1;
}
.elps {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.table-header {
height: 4.7rem;
background: transparent linear-gradient(180deg, #B4E1DC 0%, #CEF2EE 100%) 0% 0% no-repeat padding-box;
opacity: 1;
align-items: center;
}<html>
<head>
<link rel="stylesheet" href="table-grid.css">
</head>
<body>
<div class="preview-data" style="overflow: auto;">
<div class="preview-grid table-header">
<div class="table-heading elps"> test_colum_temp1 </div>
<div class="table-heading elps"> test_colum_temp2 </div>
<div class="table-heading elps"> test_colum_temp3 </div>
<div class="table-heading elps"> test_colum_temp4 </div>
<div class="table-heading elps"> test_colum_temp5 </div>
<div class="table-heading elps"> test_colum_temp6 </div>
<div class="table-heading elps"> test_colum_temp7 </div>
<div class="table-heading elps"> test_colum_temp8 </div>
<div class="table-heading elps"> test_colum_temp9 </div>
<div class="table-heading elps"> test_colum_temp10 </div>
<div class="table-heading elps"> test_colum_temp11 </div>
</div>
<div class="preview-body">
<div class="preview-grid" >
<div class="elps"> 103.8134803 </div>
<div class="elps"> 55.50110531 </div>
<div class="elps"> 1275.900443 </div>
<div class="elps"> 0.770877864 </div>
<div class="elps"> 53.58138228 </div>
<div class="elps"> 49.07928495 </div>
<div class="elps"> 0.273326811 </div>
<div class="elps"> 0.755619823 </div>
<div class="elps"> 1 </div>
<div class="elps"> 1 </div>
<div class="elps"> 1 </div>
</div>
<div class="preview-grid" >
<div class="elps"> 87.81156167 </div>
<div class="elps"> 54.55185891 </div>
<div class="elps"> 825.0793972 </div>
<div class="elps"> 0.652288275 </div>
<div class="elps"> 40.14023029 </div>
<div class="elps"> 49.79152226 </div>
<div class="elps"> 0.287583079 </div>
<div class="elps"> 0.559350628 </div>
<div class="elps"> 1 </div>
<div class="elps"> 2 </div>
<div class="elps"> 1 </div>
</div>
<div class="preview-grid" >
<div class="elps"> 85.56218928 </div>
<div class="elps"> 58.53817573 </div>
<div class="elps"> 861.5101623 </div>
<div class="elps"> 0.362358621 </div>
<div class="elps"> 46.21407125 </div>
<div class="elps"> 49.28569363 </div>
<div class="elps"> 0.293382795 </div>
<div class="elps"> 0.212992806 </div>
<div class="elps"> 1 </div>
<div class="elps"> 3 </div>
<div class="elps"> 1 </div>
</div>
<div class="preview-grid" >
<div class="elps"> 93.17297676 </div>
<div class="elps"> 49.57534931 </div>
<div class="elps"> 1070.479512 </div>
<div class="elps"> 0.910995451 </div>
<div class="elps"> 43.41520165 </div>
<div class="elps"> 50.00485976 </div>
<div class="elps"> 0.236371256 </div>
<div class="elps"> 0.399526594 </div>
<div class="elps"> 1 </div>
<div class="elps"> 4 </div>
<div class="elps"> 1 </div>
</div>
<div class="preview-grid" >
<div class="elps"> 94.70792373 </div>
<div class="elps"> 50.7626412 </div>
<div class="elps"> 1243.555551 </div>
<div class="elps"> 0.742229795 </div>
<div class="elps"> 51.46288563 </div>
<div class="elps"> 47.87741733 </div>
<div class="elps"> 0.269271984 </div>
<div class="elps"> 0.374426011 </div>
<div class="elps"> 1 </div>
<div class="elps"> 5 </div>
<div class="elps"> 1 </div>
</div>
<div class="preview-grid" >
<div class="elps"> 88.04868919 </div>
<div class="elps"> 54.56374166 </div>
<div class="elps"> 841.2944223 </div>
<div class="elps"> 0.321906534 </div>
<div class="elps"> 38.42643344 </div>
<div class="elps"> 49.29476129 </div>
<div class="elps"> 0.223401343 </div>
<div class="elps"> 0.38842411 </div>
<div class="elps"> 1 </div>
<div class="elps"> 6 </div>
<div class="elps"> 1 </div>
</div>
<div class="preview-grid" >
<div class="elps"> 92.60998811 </div>
<div class="elps"> 46.53531126 </div>
<div class="elps"> 2235.557334 </div>
<div class="elps"> 0.188342999 </div>
<div class="elps"> 26.91667149 </div>
<div class="elps"> 48.25744953 </div>
<div class="elps"> 0.343437097 </div>
<div class="elps"> 0.569485024 </div>
<div class="elps"> 1 </div>
<div class="elps"> 7 </div>
<div class="elps"> 1 </div>
</div>
<div class="preview-grid" >
<div class="elps"> 78.39615499 </div>
<div class="elps"> 56.67733732 </div>
<div class="elps"> 805.7510368 </div>
<div class="elps"> 0.779222574 </div>
<div class="elps"> 42.94484546 </div>
<div class="elps"> 44.55079579 </div>
<div class="elps"> 0.36787928 </div>
<div class="elps"> 0.635523247 </div>
<div class="elps"> 1 </div>
<div class="elps"> 8 </div>
<div class="elps"> 1 </div>
</div>
<div class="preview-grid" >
<div class="elps"> 95.0224663 </div>
<div class="elps"> 54.25944705 </div>
<div class="elps"> 1498.289913 </div>
<div class="elps"> 0.308294647 </div>
<div class="elps"> 35.55854993 </div>
<div class="elps"> 48.29252865 </div>
<div class="elps"> 0.154294254 </div>
<div class="elps"> 0.595911594 </div>
<div class="elps"> 1 </div>
<div class="elps"> 9 </div>
<div class="elps"> 1 </div>
</div>
<div class="preview-grid" >
<div class="elps"> 97.94046788 </div>
<div class="elps"> 45.11974188 </div>
<div class="elps"> 610.7545205 </div>
<div class="elps"> 0.605624034 </div>
<div class="elps"> 50.86905608 </div>
<div class="elps"> 49.76304446 </div>
<div class="elps"> 0.072605217 </div>
<div class="elps"> 0.285179096 </div>
<div class="elps"> 1 </div>
<div class="elps"> 10 </div>
<div class="elps"> 1 </div>
</div>
<div class="preview-grid" >
<div class="elps"> 107.3303487 </div>
<div class="elps"> 53.70729619 </div>
<div class="elps"> 976.4535808 </div>
<div class="elps"> 0.381335587 </div>
<div class="elps"> 36.28893667 </div>
<div class="elps"> 50.75646912 </div>
<div class="elps"> 0.271616947 </div>
<div class="elps"> 0.753091636 </div>
<div class="elps"> 1 </div>
<div class="elps"> 11 </div>
<div class="elps"> 1 </div>
</div>
<div class="preview-grid" >
<div class="elps"> 100.9132443 </div>
<div class="elps"> 49.64548674 </div>
<div class="elps"> 734.1708356 </div>
<div class="elps"> 0.536329194 </div>
<div class="elps"> 48.98867712 </div>
<div class="elps"> 47.88492472 </div>
<div class="elps"> 0.241992309 </div>
<div class="elps"> 0.429798513 </div>
<div class="elps"> 1 </div>
<div class="elps"> 12 </div>
<div class="elps"> 1 </div>
</div>
<div class="preview-grid" >
<div class="elps"> 93.55692806 </div>
<div class="elps"> 56.76086781 </div>
<div class="elps"> 1623.144455 </div>
<div class="elps"> 0.615410711 </div>
<div class="elps"> 24.34291109 </div>
<div class="elps"> 48.05278606 </div>
<div class="elps"> 0.181520639 </div>
<div class="elps"> 0.498764785 </div>
<div class="elps"> 1 </div>
<div class="elps"> 13 </div>
<div class="elps"> 1 </div>
</div>
<div class="preview-grid" >
<div class="elps"> 89.30988015 </div>
<div class="elps"> 53.79946488 </div>
<div class="elps"> 1297.521637 </div>
<div class="elps"> 0.397654067 </div>
<div class="elps"> 28.59050594 </div>
<div class="elps"> 48.53504178 </div>
<div class="elps"> 0.296762214 </div>
<div class="elps"> 0.469156464 </div>
<div class="elps"> 1 </div>
<div class="elps"> 14 </div>
<div class="elps"> 1 </div>
</div>
<div class="preview-grid" >
<div class="elps"> 95.86570986 </div>
<div class="elps"> 53.54254346 </div>
<div class="elps"> 374.7382529 </div>
<div class="elps"> 0.512612454 </div>
<div class="elps"> 50.37168029 </div>
<div class="elps"> 48.06152787 </div>
<div class="elps"> 0.306293617 </div>
<div class="elps"> 0.806833733 </div>
<div class="elps"> 1 </div>
<div class="elps"> 15 </div>
<div class="elps"> 1 </div>
</div>
<div class="preview-grid" >
<div class="elps"> 98.21570032 </div>
<div class="elps"> 64.2211673 </div>
<div class="elps"> 1209.986692 </div>
<div class="elps"> 0.456943868 </div>
<div class="elps"> 52.86463053 </div>
<div class="elps"> 51.94558465 </div>
<div class="elps"> 0.059796339 </div>
<div class="elps"> 0.489518643 </div>
<div class="elps"> 1 </div>
<div class="elps"> 16 </div>
<div class="elps"> 1 </div>
</div>
<div class="preview-grid" >
<div class="elps"> 91.83816936 </div>
<div class="elps"> 49.24932567 </div>
<div class="elps"> 498.0255175 </div>
<div class="elps"> 0.615926861 </div>
<div class="elps"> 44.72080873 </div>
<div class="elps"> 50.50939571 </div>
<div class="elps"> 0.218356992 </div>
<div class="elps"> -0.024030955 </div>
<div class="elps"> 1 </div>
<div class="elps"> 17 </div>
<div class="elps"> 1 </div>
</div>
<div class="preview-grid" >
<div class="elps"> 88.19244358 </div>
<div class="elps"> 49.91494967 </div>
<div class="elps"> 448.9782892 </div>
<div class="elps"> 0.780493703 </div>
<div class="elps"> 47.56348714 </div>
<div class="elps"> 50.05690122 </div>
<div class="elps"> 0.215392002 </div>
<div class="elps"> 0.565876439 </div>
<div class="elps"> 1 </div>
<div class="elps"> 18 </div>
<div class="elps"> 1 </div>
</div>
<div class="preview-grid" >
<div class="elps"> 94.1584902 </div>
<div class="elps"> 52.82464516 </div>
<div class="elps"> 1567.446209 </div>
<div class="elps"> 0.439638349 </div>
<div class="elps"> 46.4667757 </div>
<div class="elps"> 48.38126765 </div>
<div class="elps"> 0.330792071 </div>
<div class="elps"> 0.453679354 </div>
<div class="elps"> 1 </div>
<div class="elps"> 19 </div>
<div class="elps"> 1 </div>
</div>
<div class="preview-grid" >
<div class="elps"> 95.8022574 </div>
<div class="elps"> 65.36720957 </div>
<div class="elps"> 1559.852703 </div>
<div class="elps"> 0.462684652 </div>
<div class="elps"> 50.61895582 </div>
<div class="elps"> 45.92053786 </div>
<div class="elps"> 0.308273401 </div>
<div class="elps"> 0.38869743 </div>
<div class="elps"> 1 </div>
<div class="elps"> 20 </div>
<div class="elps"> 1 </div>
</div>
</div>
</div>
<body>
</html>Just set width:fit-content; to class .table-header :
Only ie would not accept it: https://developer.mozilla.org/en-US/docs/Web/CSS/width#Browser_compatibility
.preview-grid {
display: grid;
grid-auto-flow: column;
gap: 2rem;
grid-auto-columns: minmax(150px, auto);
width: 100%;
}
.preview-data {
width: 100%;
}
.table-heading {
text-align: left;
font: normal normal normal 2rem/2.3rem Arial;
letter-spacing: 0px;
color: #000000CC;
opacity: 1;
}
.elps {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.table-header {
height: 4.7rem;
background: transparent linear-gradient(180deg, #B4E1DC 0%, #CEF2EE 100%) 0% 0% no-repeat padding-box;
opacity: 1;
align-items: center;
width: fit-content; /* <<<<<<<<<<<<<<<<<<< */
}<html>
<head>
<link rel="stylesheet" href="table-grid.css">
</head>
<body>
<div class="preview-data" style="overflow: auto;">
<div class="preview-grid table-header">
<div class="table-heading elps"> test_colum_temp1 </div>
<div class="table-heading elps"> test_colum_temp2 </div>
<div class="table-heading elps"> test_colum_temp3 </div>
<div class="table-heading elps"> test_colum_temp4 </div>
<div class="table-heading elps"> test_colum_temp5 </div>
<div class="table-heading elps"> test_colum_temp6 </div>
<div class="table-heading elps"> test_colum_temp7 </div>
<div class="table-heading elps"> test_colum_temp8 </div>
<div class="table-heading elps"> test_colum_temp9 </div>
<div class="table-heading elps"> test_colum_temp10 </div>
<div class="table-heading elps"> test_colum_temp11 </div>
</div>
<div class="preview-body">
<div class="preview-grid" >
<div class="elps"> 103.8134803 </div>
<div class="elps"> 55.50110531 </div>
<div class="elps"> 1275.900443 </div>
<div class="elps"> 0.770877864 </div>
<div class="elps"> 53.58138228 </div>
<div class="elps"> 49.07928495 </div>
<div class="elps"> 0.273326811 </div>
<div class="elps"> 0.755619823 </div>
<div class="elps"> 1 </div>
<div class="elps"> 1 </div>
<div class="elps"> 1 </div>
</div>
<div class="preview-grid" >
<div class="elps"> 87.81156167 </div>
<div class="elps"> 54.55185891 </div>
<div class="elps"> 825.0793972 </div>
<div class="elps"> 0.652288275 </div>
<div class="elps"> 40.14023029 </div>
<div class="elps"> 49.79152226 </div>
<div class="elps"> 0.287583079 </div>
<div class="elps"> 0.559350628 </div>
<div class="elps"> 1 </div>
<div class="elps"> 2 </div>
<div class="elps"> 1 </div>
</div>
<div class="preview-grid" >
<div class="elps"> 85.56218928 </div>
<div class="elps"> 58.53817573 </div>
<div class="elps"> 861.5101623 </div>
<div class="elps"> 0.362358621 </div>
<div class="elps"> 46.21407125 </div>
<div class="elps"> 49.28569363 </div>
<div class="elps"> 0.293382795 </div>
<div class="elps"> 0.212992806 </div>
<div class="elps"> 1 </div>
<div class="elps"> 3 </div>
<div class="elps"> 1 </div>
</div>
<div class="preview-grid" >
<div class="elps"> 93.17297676 </div>
<div class="elps"> 49.57534931 </div>
<div class="elps"> 1070.479512 </div>
<div class="elps"> 0.910995451 </div>
<div class="elps"> 43.41520165 </div>
<div class="elps"> 50.00485976 </div>
<div class="elps"> 0.236371256 </div>
<div class="elps"> 0.399526594 </div>
<div class="elps"> 1 </div>
<div class="elps"> 4 </div>
<div class="elps"> 1 </div>
</div>
<div class="preview-grid" >
<div class="elps"> 94.70792373 </div>
<div class="elps"> 50.7626412 </div>
<div class="elps"> 1243.555551 </div>
<div class="elps"> 0.742229795 </div>
<div class="elps"> 51.46288563 </div>
<div class="elps"> 47.87741733 </div>
<div class="elps"> 0.269271984 </div>
<div class="elps"> 0.374426011 </div>
<div class="elps"> 1 </div>
<div class="elps"> 5 </div>
<div class="elps"> 1 </div>
</div>
<div class="preview-grid" >
<div class="elps"> 88.04868919 </div>
<div class="elps"> 54.56374166 </div>
<div class="elps"> 841.2944223 </div>
<div class="elps"> 0.321906534 </div>
<div class="elps"> 38.42643344 </div>
<div class="elps"> 49.29476129 </div>
<div class="elps"> 0.223401343 </div>
<div class="elps"> 0.38842411 </div>
<div class="elps"> 1 </div>
<div class="elps"> 6 </div>
<div class="elps"> 1 </div>
</div>
<div class="preview-grid" >
<div class="elps"> 92.60998811 </div>
<div class="elps"> 46.53531126 </div>
<div class="elps"> 2235.557334 </div>
<div class="elps"> 0.188342999 </div>
<div class="elps"> 26.91667149 </div>
<div class="elps"> 48.25744953 </div>
<div class="elps"> 0.343437097 </div>
<div class="elps"> 0.569485024 </div>
<div class="elps"> 1 </div>
<div class="elps"> 7 </div>
<div class="elps"> 1 </div>
</div>
<div class="preview-grid" >
<div class="elps"> 78.39615499 </div>
<div class="elps"> 56.67733732 </div>
<div class="elps"> 805.7510368 </div>
<div class="elps"> 0.779222574 </div>
<div class="elps"> 42.94484546 </div>
<div class="elps"> 44.55079579 </div>
<div class="elps"> 0.36787928 </div>
<div class="elps"> 0.635523247 </div>
<div class="elps"> 1 </div>
<div class="elps"> 8 </div>
<div class="elps"> 1 </div>
</div>
<div class="preview-grid" >
<div class="elps"> 95.0224663 </div>
<div class="elps"> 54.25944705 </div>
<div class="elps"> 1498.289913 </div>
<div class="elps"> 0.308294647 </div>
<div class="elps"> 35.55854993 </div>
<div class="elps"> 48.29252865 </div>
<div class="elps"> 0.154294254 </div>
<div class="elps"> 0.595911594 </div>
<div class="elps"> 1 </div>
<div class="elps"> 9 </div>
<div class="elps"> 1 </div>
</div>
<div class="preview-grid" >
<div class="elps"> 97.94046788 </div>
<div class="elps"> 45.11974188 </div>
<div class="elps"> 610.7545205 </div>
<div class="elps"> 0.605624034 </div>
<div class="elps"> 50.86905608 </div>
<div class="elps"> 49.76304446 </div>
<div class="elps"> 0.072605217 </div>
<div class="elps"> 0.285179096 </div>
<div class="elps"> 1 </div>
<div class="elps"> 10 </div>
<div class="elps"> 1 </div>
</div>
<div class="preview-grid" >
<div class="elps"> 107.3303487 </div>
<div class="elps"> 53.70729619 </div>
<div class="elps"> 976.4535808 </div>
<div class="elps"> 0.381335587 </div>
<div class="elps"> 36.28893667 </div>
<div class="elps"> 50.75646912 </div>
<div class="elps"> 0.271616947 </div>
<div class="elps"> 0.753091636 </div>
<div class="elps"> 1 </div>
<div class="elps"> 11 </div>
<div class="elps"> 1 </div>
</div>
<div class="preview-grid" >
<div class="elps"> 100.9132443 </div>
<div class="elps"> 49.64548674 </div>
<div class="elps"> 734.1708356 </div>
<div class="elps"> 0.536329194 </div>
<div class="elps"> 48.98867712 </div>
<div class="elps"> 47.88492472 </div>
<div class="elps"> 0.241992309 </div>
<div class="elps"> 0.429798513 </div>
<div class="elps"> 1 </div>
<div class="elps"> 12 </div>
<div class="elps"> 1 </div>
</div>
<div class="preview-grid" >
<div class="elps"> 93.55692806 </div>
<div class="elps"> 56.76086781 </div>
<div class="elps"> 1623.144455 </div>
<div class="elps"> 0.615410711 </div>
<div class="elps"> 24.34291109 </div>
<div class="elps"> 48.05278606 </div>
<div class="elps"> 0.181520639 </div>
<div class="elps"> 0.498764785 </div>
<div class="elps"> 1 </div>
<div class="elps"> 13 </div>
<div class="elps"> 1 </div>
</div>
<div class="preview-grid" >
<div class="elps"> 89.30988015 </div>
<div class="elps"> 53.79946488 </div>
<div class="elps"> 1297.521637 </div>
<div class="elps"> 0.397654067 </div>
<div class="elps"> 28.59050594 </div>
<div class="elps"> 48.53504178 </div>
<div class="elps"> 0.296762214 </div>
<div class="elps"> 0.469156464 </div>
<div class="elps"> 1 </div>
<div class="elps"> 14 </div>
<div class="elps"> 1 </div>
</div>
<div class="preview-grid" >
<div class="elps"> 95.86570986 </div>
<div class="elps"> 53.54254346 </div>
<div class="elps"> 374.7382529 </div>
<div class="elps"> 0.512612454 </div>
<div class="elps"> 50.37168029 </div>
<div class="elps"> 48.06152787 </div>
<div class="elps"> 0.306293617 </div>
<div class="elps"> 0.806833733 </div>
<div class="elps"> 1 </div>
<div class="elps"> 15 </div>
<div class="elps"> 1 </div>
</div>
<div class="preview-grid" >
<div class="elps"> 98.21570032 </div>
<div class="elps"> 64.2211673 </div>
<div class="elps"> 1209.986692 </div>
<div class="elps"> 0.456943868 </div>
<div class="elps"> 52.86463053 </div>
<div class="elps"> 51.94558465 </div>
<div class="elps"> 0.059796339 </div>
<div class="elps"> 0.489518643 </div>
<div class="elps"> 1 </div>
<div class="elps"> 16 </div>
<div class="elps"> 1 </div>
</div>
<div class="preview-grid" >
<div class="elps"> 91.83816936 </div>
<div class="elps"> 49.24932567 </div>
<div class="elps"> 498.0255175 </div>
<div class="elps"> 0.615926861 </div>
<div class="elps"> 44.72080873 </div>
<div class="elps"> 50.50939571 </div>
<div class="elps"> 0.218356992 </div>
<div class="elps"> -0.024030955 </div>
<div class="elps"> 1 </div>
<div class="elps"> 17 </div>
<div class="elps"> 1 </div>
</div>
<div class="preview-grid" >
<div class="elps"> 88.19244358 </div>
<div class="elps"> 49.91494967 </div>
<div class="elps"> 448.9782892 </div>
<div class="elps"> 0.780493703 </div>
<div class="elps"> 47.56348714 </div>
<div class="elps"> 50.05690122 </div>
<div class="elps"> 0.215392002 </div>
<div class="elps"> 0.565876439 </div>
<div class="elps"> 1 </div>
<div class="elps"> 18 </div>
<div class="elps"> 1 </div>
</div>
<div class="preview-grid" >
<div class="elps"> 94.1584902 </div>
<div class="elps"> 52.82464516 </div>
<div class="elps"> 1567.446209 </div>
<div class="elps"> 0.439638349 </div>
<div class="elps"> 46.4667757 </div>
<div class="elps"> 48.38126765 </div>
<div class="elps"> 0.330792071 </div>
<div class="elps"> 0.453679354 </div>
<div class="elps"> 1 </div>
<div class="elps"> 19 </div>
<div class="elps"> 1 </div>
</div>
<div class="preview-grid" >
<div class="elps"> 95.8022574 </div>
<div class="elps"> 65.36720957 </div>
<div class="elps"> 1559.852703 </div>
<div class="elps"> 0.462684652 </div>
<div class="elps"> 50.61895582 </div>
<div class="elps"> 45.92053786 </div>
<div class="elps"> 0.308273401 </div>
<div class="elps"> 0.38869743 </div>
<div class="elps"> 1 </div>
<div class="elps"> 20 </div>
<div class="elps"> 1 </div>
</div>
</div>
</div>
<body>
</html>