diff --git a/css/style.css b/css/style.css
index 45aae3b..877da58 100644
--- a/css/style.css
+++ b/css/style.css
@@ -173,3 +173,10 @@ button:active {
     height: 40px;
     margin: 0 auto;
 }
+
+.truncate-text {
+    max-width: 100%; 
+    overflow: hidden; 
+    text-overflow: ellipsis; 
+    white-space: nowrap;
+}
diff --git a/js/index.js b/js/index.js
index 21abce8..77609ea 100644
--- a/js/index.js
+++ b/js/index.js
@@ -16,7 +16,44 @@ document.getElementById("body").appendChild(table);
 // Creating and adding data to first row of the table
 let row_1 = document.createElement("tr");
 let heading_1 = document.createElement("th");
-heading_1.innerHTML = "<h4>成員名稱</h4>";
+heading_1.setAttribute('style', 'width: 28%;')
+let heading_2 = document.createElement("th");
+heading_2.setAttribute('style', 'width: 12%;')
+let heading_3 = document.createElement("th");
+heading_3.setAttribute('style', 'width: 12%;')
+let heading_4 = document.createElement("th");
+heading_4.setAttribute('style', 'width: 12%;')
+let heading_5 = document.createElement("th");
+heading_5.setAttribute('style', 'width: 12%;')
+let heading_6 = document.createElement("th");
+heading_6.setAttribute('style', 'width: 12%;')
+let heading_7 = document.createElement("th");
+heading_7.setAttribute('style', 'width: 12%;')
+
+let heading_1_text = document.createElement("h4");
+heading_1_text.innerHTML = "成員名稱";
+let heading_2_text = document.createElement("h4");
+heading_2_text.innerHTML = "1<br>正刀";
+let heading_3_text = document.createElement("h4");
+heading_3_text.innerHTML = "2<br>正刀";
+let heading_4_text = document.createElement("h4");
+heading_4_text.innerHTML = "3<br>正刀";
+let heading_5_text = document.createElement("h4");
+heading_5_text.innerHTML = "1<br>殘刀";
+let heading_6_text = document.createElement("h4");
+heading_6_text.innerHTML = "2<br>殘刀";
+let heading_7_text = document.createElement("h4");
+heading_7_text.innerHTML = "3<br>殘刀";
+
+heading_1.appendChild(heading_1_text);
+heading_2.appendChild(heading_2_text);
+heading_3.appendChild(heading_3_text);
+heading_4.appendChild(heading_4_text);
+heading_5.appendChild(heading_5_text);
+heading_6.appendChild(heading_6_text);
+heading_7.appendChild(heading_7_text);
+
+/*heading_1.innerHTML = "<h4>成員名稱</h4>";
 let heading_2 = document.createElement("th");
 heading_2.innerHTML = "<h4>1<br>正刀</h4>";
 let heading_3 = document.createElement("th");
@@ -28,7 +65,7 @@ heading_5.innerHTML = "<h4>1<br>殘刀</h4>";
 let heading_6 = document.createElement("th");
 heading_6.innerHTML = "<h4>2<br>殘刀</h4>";
 let heading_7 = document.createElement("th");
-heading_7.innerHTML = "<h4>3<br>殘刀</h4>";
+heading_7.innerHTML = "<h4>3<br>殘刀</h4>";*/
 
 row_1.appendChild(heading_1);
 row_1.appendChild(heading_2);
@@ -62,7 +99,7 @@ axios.get("https://pcredive.ray650128.com/backend/api/record", {
             const item = data[i];
 
             if (item.record !== null) {
-                row_2_data_1.innerHTML = "<h5><a href=\"edit.html?id=" + item.record._id + "\">" + item.member.playerName + "</a><h5>";
+                row_2_data_1.innerHTML = "<h5 class=\"truncate-text\"><a href=\"edit.html?id=" + item.record._id + "\">" + item.member.playerName + "</a><h5>";
                 row_2_data_2.innerHTML = "<h5>" + item.record.record1.boss + "</h5>";
                 row_2_data_3.innerHTML = "<h5>" + item.record.record2.boss + "</h5>";
                 row_2_data_4.innerHTML = "<h5>" + item.record.record3.boss + "</h5>";