如何刪除表格間距

Question

我想刪除在列上放置2位數字時創建的間距。

這裏是小提琴代碼：

Here is the fiddle link

這裏一些的CSS：

table { 
    width: 85%; 
    margin: 0 auto; 
    max-height: 400px; 
    border-collapse: collapse; 
} 

    table td { 
     font-size: 14px; 
     color: #fff; 
     text-align: center; 
     max-height: 20px; 
     direction: rtl; 
    } 

    table th, td { 
     padding: 7px; 
    } 

table.to th, td { 
    padding: 0; 
}  

Answer 1

你想擁有具有相同寬度的所有列？

table td { 
    width:7%; 
    font-size: 14px; 
    color: #fff; 
    text-align: center; 
    max-height: 20px; 
    direction: rtl; 
} 

//編輯：

body { 
 
    margin: 0; 
 
    padding: 30px; 
 
    font-family: 'Source Sans Pro', sans-serif; 
 
    direction: rtl; 
 
    background-color:#000; 
 
} 
 

 
table { 
 
    width: auto; 
 
    margin: 0 auto; 
 
    /*transform: scale(0.9);*/ 
 
    max-height: 400px; 
 
    border-collapse: collapse; 
 
} 
 

 
    table th { 
 
     color: #9ebbf3; 
 
     height: 0.3%; 
 
     background: linear-gradient(to bottom, rgba(57,71,82,0.4) 0%,rgba(40, 40, 52, 0.31) 100%); 
 
     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#b3394752', endColorstr='#d6282834',GradientType=0); 
 
    } 
 

 
    table td { 
 
     padding: 0 20px; 
 
     font-size: 14px; 
 
     color: #fff; 
 
     text-align: center; 
 
     max-height: 20px; 
 
     direction: rtl; 
 
    } 
 

 
    table th, td { 
 
     padding: 7px; 
 
    } 
 

 
     table tr td:last-child { 
 
      color: #ffdf32; 
 
     } 
 

 
       table tr th:last-child { 
 
      color: #ffdf32; 
 
      font-weight:500; 
 
     } 
 

 
table.to th, td { 
 
    padding: 0; 
 
} 
 

 
table.to th { 
 
    color: #ffdf32 !important; 
 
    font-weight: 500 !important; 
 
} 
 

 
table tr { 
 
    border:none!important; 
 
} 
 

 
table td { 
 
    border-left: 1px solid; 
 
    max-height: 20px; 
 
    border-color: #425559; 
 
}

<table id="reTable" class="to" dir="ltr"> 
 
      <tr cellspacing="0"> 
 

 
       <th cellpadding="0">10</th> 
 
       <th>999</th> 
 
       <th>8</th> 
 
       <th>7</th> 
 
       <th>6</th> 
 
       <th>5</th> 
 
       <th>4</th> 
 
       <th>3</th> 
 
       <th>2</th> 
 
       <th>1</th> 
 
       <th>(1)1</th> 
 
      </tr> 
 
      
 

 
      
 
      <tr> 
 
       <td>2</td> 
 
       <td>2</td> 
 
       <td>2</td> 
 
       <td>2</td> 
 
       <td>x</td> 
 
       <td>1</td> 
 
       <td>x</td> 
 
       <td>2</td> 
 
       <td>1</td> 
 
       <td>x</td> 
 
       <td>4(1)</td> 
 
      </tr> 
 
      <tr> 
 
       <td>2</td> 
 
       <td>2</td> 
 
       <td>2</td> 
 
       <td>2</td> 
 
       <td>x</td> 
 
       <td>1</td> 
 
       <td>x</td> 
 
       <td>1</td> 
 
       <td>x</td> 
 
       <td>1</td> 
 
       <td>5(1)</td> 
 
      </tr> 
 
      <tr> 
 
       <td>2</td> 
 
       <td>2</td> 
 
       <td>2</td> 
 
       <td>2</td> 
 
       <td>1</td> 
 
       <td>x</td> 
 
       <td>x</td> 
 
       <td>1</td> 
 
       <td>2</td> 
 
       <td>1</td> 
 
       <td>6(1)</td> 
 
      </tr> 
 
      <tr> 
 
       <td>2</td> 
 
       <td>2</td> 
 
       <td>2</td> 
 
       <td>2</td> 
 
       <td>2</td> 
 
       <td>x</td> 
 
       <td>1</td> 
 
       <td>x</td> 
 
       <td>2</td> 
 
       <td>x</td> 
 
       <td>7(1)</td> 
 
      </tr> 
 
      <tr> 
 
       <td>2</td> 
 
       <td>2</td> 
 
       <td>2</td> 
 
       <td>2</td> 
 
       <td>x</td> 
 
       <td>1</td> 
 
       <td>2</td> 
 
       <td>1</td> 
 
       <td>x</td> 
 
       <td>1</td> 
 
       <td>8(1)</td> 
 
      </tr> 
 
      <tr> 
 
       <td>2</td> 
 
       <td>2</td> 
 
       <td>2</td> 
 
       <td>2</td> 
 
       <td>2</td> 
 
       <td>x</td> 
 
       <td>2</td> 
 
       <td>1</td> 
 
       <td>x</td> 
 
       <td>1</td> 
 
       <td>9(1)</td> 
 
      </tr> 
 
      <tr> 
 
       <td>2</td> 
 
       <td>2</td> 
 
       <td>1</td> 
 
       <td>2</td> 
 
       <td>x</td> 
 
       <td>x</td> 
 
       <td>1</td> 
 
       <td>1</td> 
 
       <td>x</td> 
 
       <td>x</td> 
 
       <td>10(1)</td> 
 
      </tr> 
 
      <tr> 
 
       <td>2</td> 
 
       <td>1</td> 
 
       <td>2</td> 
 
       <td>2</td> 
 
       <td>x</td> 
 
       <td>1</td> 
 
       <td>x</td> 
 
       <td>1</td> 
 
       <td>x</td> 
 
       <td>2</td> 
 
       <td>11(1)</td> 
 
      </tr> 
 
      <tr> 
 
       <td>2</td> 
 
       <td>x</td> 
 
       <td>2</td> 
 
       <td>1</td> 
 
       <td>x</td> 
 
       <td>2</td> 
 
       <td>x</td> 
 
       <td>1</td> 
 
       <td>x</td> 
 
       <td>2</td> 
 
       <td>12(1)</td> 
 
      </tr> 
 
      <tr> 
 
       <td>2</td> 
 
       <td>x</td> 
 
       <td>2</td> 
 
       <td>1</td> 
 
       <td>x</td> 
 
       <td>x</td> 
 
       <td>1</td> 
 
       <td>x</td> 
 
       <td>x</td> 
 
       <td>x</td> 
 
       <td>13(1)</td> 
 
      </tr> 
 
      <tr> 
 
       <td>2</td> 
 
       <td>1</td> 
 
       <td>2</td> 
 
       <td>2</td> 
 
       <td>2</td> 
 
       <td>x</td> 
 
       <td>1</td> 
 
       <td>x</td> 
 
       <td>1</td> 
 
       <td>x</td> 
 
       <td>14(1)</td> 
 
      </tr> 
 
      <tr> 
 
       <td>2</td> 
 
       <td>2</td> 
 
       <td>2</td> 
 
       <td>2</td> 
 
       <td>x</td> 
 
       <td>2</td> 
 
       <td>x</td> 
 
       <td>2</td> 
 
       <td>x</td> 
 
       <td>1</td> 
 
       <td>15(1)</td> 
 
      </tr> 
 
      <tr> 
 
       <td>2</td> 
 
       <td>2</td> 
 
       <td>2</td> 
 
       <td>2</td> 
 
       <td>2</td> 
 
       <td>x</td> 
 
       <td>1</td> 
 
       <td>x</td> 
 
       <td>2</td> 
 
       <td>x</td> 
 
       <td>16(1)</td> 
 
      </tr> 
 

 
     </table>

Answer 2

使用max-width與overflow:hidden不會讓th有多餘的空格擴大！

N.B：這是爲了

我想刪除，當我把2個數字列上創建的間距進行。

，你問，並使用數字更THN 3可能溢出的th的長度，從而溢出使用

table.to th { 
     color: #ffdf32 !important; 
     font-weight: 500 !important; 
     overflow: hidden; 
     max-width: 4px; //use max width as you prefer 
    } 

js fiddle link here