pc 사이즈 조견표 스크롤관련 처리

src/main/webapp/WEB-INF/views/web/goods/GoodsSizeInfoFormWeb.html

@@ -89,18 +89,18 @@
 									<div class="body_t">
 										<table>
 											<colgroup th:each="measurement, status : ${measurementList}" th:if="${status.first}">
-												<col th:if="${measurement.size1}" th:attr="width=${typeWith+'%'}">
-												<col th:if="${measurement.size2}" th:attr="width=${typeWith+'%'}">
-												<col th:if="${measurement.size3}" th:attr="width=${typeWith+'%'}">
-												<col th:if="${measurement.size4}" th:attr="width=${typeWith+'%'}">
-												<col th:if="${measurement.size5}" th:attr="width=${typeWith+'%'}">
-												<col th:if="${measurement.size6}" th:attr="width=${typeWith+'%'}">
-												<col th:if="${measurement.size7}" th:attr="width=${typeWith+'%'}">
-												<col th:if="${measurement.size8}" th:attr="width=${typeWith+'%'}">
-												<col th:if="${measurement.size9}" th:attr="width=${typeWith+'%'}">
-												<col th:if="${measurement.size10}" th:attr="width=${typeWith+'%'}">
-												<col th:if="${measurement.size11}" th:attr="width=${typeWith+'%'}">
-												<col th:if="${measurement.size12}" th:attr="width=${typeWith+'%'}">
+												<col th:if="${measurement.size1}" width="20%">
+												<col th:if="${measurement.size2}" width="20%">
+												<col th:if="${measurement.size3}" width="20%">
+												<col th:if="${measurement.size4}" width="20%">
+												<col th:if="${measurement.size5}" width="20%">
+												<col th:if="${measurement.size6}" width="20%">
+												<col th:if="${measurement.size7}" width="20%">
+												<col th:if="${measurement.size8}" width="20%">
+												<col th:if="${measurement.size9}" width="20%">
+												<col th:if="${measurement.size10}" width="20%">
+												<col th:if="${measurement.size11}" width="20%">
+												<col th:if="${measurement.size12}" width="20%">
 											</colgroup>
 											<thead>
 												<tr th:each="measurement, status : ${measurementList}" th:if="${status.first}" >
@@ -231,6 +231,27 @@
 		});
 	
 	});
+	
+	var scrTbl,scrTblLeft,scrTblDown;
+    $(".tbl.scroll_tbl .body_t").on('click', function() {
+        $(this).on({
+            "mousedown": function(e) {
+                e.preventDefault();
+                scrTblDown = true;
+                scrTbl = e.pageX;
+                scrTblLeft = $(this).scrollLeft();
+            },
+            "mousemove": function(e) {
+                if(scrTblDown){
+                    var newX = e.pageX;
+                    $(this).scrollLeft(scrTblLeft - newX + scrTbl);
+                }
+            },
+            "mouseup": function(e) {
+                scrTblDown = false;
+            },
+        });
+    });
 	/*]]>*/
 </script>
 </html>