diff --git a/docs/en_US/_templates/index.html b/docs/en_US/_templates/index.html
index e7cfedc875..e6557fe280 100644
--- a/docs/en_US/_templates/index.html
+++ b/docs/en_US/_templates/index.html
@@ -69,11 +69,11 @@ <h1 class="title">NNI capabilities in a glance</h1>
 <table class="tuner">
   <tbody>
     <tr>
-      <td></td>
+      <td class="references"></td>
       <td>
         <b>Built-in</b>
       </td>
-      <td class="references">
+      <td class="algorithms references">
         <b>References</b>
       </td>
     </tr>
@@ -116,7 +116,7 @@ <h1 class="title">NNI capabilities in a glance</h1>
         </ul>
       </td>
       <td>
-        <ul>
+        <ul class="algorithms">
           <li><a href="https://nni.readthedocs.io/en/latest/autotune_ref.html#trial">Python API</a></li>
           <li><a href="{{ pathto('Tutorial/AnnotationSpec') }}">NNI Annotation</a></li>
           <li><a href="https://nni.readthedocs.io/en/latest/installation.html">Supported OS</a></li>
@@ -184,7 +184,7 @@ <h1 class="title">NNI capabilities in a glance</h1>
         </ul>
       </td>
       <td>
-        <ul>
+        <ul class="algorithms">
           <li><a href="{{ pathto('Tuner/CustomizeTuner') }}">CustomizeTuner</a></li>
           <li><a href="{{ pathto('Assessor/CustomizeAssessor') }}">CustomizeAssessor</a></li>
           <li><a href="{{ pathto('Tutorial/InstallCustomizedAlgos') }}">Install Customized Algorithms as
diff --git a/docs/static/css/custom.css b/docs/static/css/custom.css
index 2e7c5bba61..740bfb3929 100644
--- a/docs/static/css/custom.css
+++ b/docs/static/css/custom.css
@@ -86,8 +86,10 @@
 
 .tuner{
     width: 90%;
+    min-width: 674px;
     margin: 0 auto;
     margin-bottom: 25px;
+    table-layout: fixed;
 }
 
 .tuner, .tuner td{
@@ -95,8 +97,8 @@
     font-size: 14px;
 }
 
-.tuner td.references{
-    width: 25%;
+.tuner .references{
+    width: 16%;
 }
 
 .tuner td:not(.core-td) {
@@ -108,8 +110,22 @@
 }
 
 .tuner ul.core{
+    word-break: break-word;
     padding-left: 25px;
     padding-top: 25px;
+    box-sizing: border-box;
+}
+
+@media screen and (min-width:1361px){
+    .tuner ul.core{
+        width: 25%;
+    }
+}
+
+@media screen and (max-width:1360px){
+    .tuner ul.core{
+        width: 32%;
+    }
 }
 
 .tuner .title {
@@ -125,6 +141,10 @@
     line-height: 26px;
 }
 
+.tuner .algorithms{
+    word-break: break-word;
+}
+
 .wy-nav-content .tuner li{
     list-style-type: none;
     line-height: 26px;