如何删除 table th td 间距答案

【问题标题】：How to remove table th td spacing如何删除 table th td 间距
【发布时间】：2016-08-12 07:55:53
【问题描述】：

我想删除当我在一列上放置 2 个数字时创建的间距。

这里是小提琴代码：

这里是一些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;
}

【问题讨论】：

试试你添加小提琴链接？
你的问题解决了！请检查下面的答案！

标签： html css cell css-tables

【解决方案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>

【讨论】：

是的，但宽度最小！
您可以更改 td 填充。记得删除表格 100% 的宽度。像这样：table td { padding: 0 20px; }

【解决方案2】：

将max-width 与overflow:hidden 一起使用不会让th 扩展为额外的空格！

注意：这样做是为了

我想删除当我在一列上放置 2 位数字时创建的间距。

正如你所问的那样，使用多于 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

【讨论】：