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

我想删除当我在一列上放置 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;
}    

【问题讨论】:

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

标签: 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-widthoverflow: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

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2017-03-19
    • 1970-01-01
    • 2017-11-01
    • 1970-01-01
    • 2022-11-04
    • 2023-03-08
    • 1970-01-01
    相关资源
    最近更新 更多