如何删除表格间距

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