如何减少桌子行高

时间:2018-06-29 11:07:29

标签: html css html-table

我的桌子上只有几行。我用CSS尝试了很多方法。 css停止工作在高度:10像素;我应该怎么做。请向我显示正确的方向。 谁能告诉我该怎么做?

enter image description here

 #gridview {
        font-family: arial, sans-serif;
        border-collapse: collapse;
        width: 100%;
    }
 #gridview th {
        background-color: #808080;
        border: 1px solid #dddddd;
       text-align: center;
       padding: 0px 0px 0px 0px;
        margin:0px;
        height: 0px;
    }

#gridview td {
        border: 0px solid #dddddd;
        text-align: left;
       padding: 0px 0px 0px 0px;
        margin:0px;
        height: 0px;
    }

 #gridview tr:nth-child(even) {
        background-color: #dddddd;
    }
#gridview table th {
        color:#ffffff;
    }
</style>
<table id="gridview">
        <tr>
             <th><h5>SrNo</h5> </th>
             <th><h5>Stock No</h5></th>
             <th><h5>Stock Name</h5></th>
             <th><h5>UM</h5></th>
             <th><h5>Balance</h5></th>
             <th><h5>Purchase</h5></th>
             <th><h5>Quantity</h5> </th>
             <th><h5>Amount</h5></th>
             <th></th>
        </tr>
        <tr>
             <td><p>SrNo</p> </td>
             <td><p>Stock No</p></td>
             <td><p>Stock Name</p></td>
             <td><p>UM</p></td>
             <td><p>Balance</p></td>
             <td><p>Purchase</p></td>
             <td><p>Quantity</p> </td>
             <td><p>Amount</p></td>
        </tr>
 </table>

1 个答案:

答案 0 :(得分:0)

p元素中的边距是问题。删除它会使高度降低。

#gridview {
        font-family: arial, sans-serif;
        border-collapse: collapse;
        width: 100%;
    }
 #gridview th {
        background-color: #808080;
        border: 1px solid #dddddd;
       text-align: center;
       padding: 0px 0px 0px 0px;
        margin:0px;
        height: 0px;
    }

#gridview td {
        border: 0px solid #dddddd;
        text-align: left;
       padding: 0px 0px 0px 0px;
        margin:0px;
        height: 0px;
    }

 #gridview tr:nth-child(even) {
        background-color: #dddddd;
    }
#gridview table th {
        color:#ffffff;
    }
   table p
    {
      padding:0px;
      margin:0px;
    }
<table id="gridview">
                <tr>
                    <th><h5>SrNo</h5> </th>
                    <th><h5>Stock No</h5></th>
                    <th><h5>Stock Name</h5></th>
                    <th><h5>UM</h5></th>
                    <th><h5>Balance</h5></th>
                    <th><h5>Purchase</h5></th>
                    <th><h5>Quantity</h5> </th>
                    <th><h5>Amount</h5></th>
                    <th></th>
                </tr>
                <tr>
                    <td><p>SrNo</p> </td>
                    <td><p>Stock No</p></td>
                    <td><p>Stock Name</p></td>
                    <td><p>UM</p></td>
                    <td><p>Balance</p></td>
                    <td><p>Purchase</p></td>
                    <td><p>Quantity</p> </td>
                    <td><p>Amount</p></td>
                </tr>
            </table>

希望这是您所需要的。