Cyrus
Cyrus

Reputation: 33

How to reduce table row height

I have table with few rows. I try so many way with css. css stop worked at height:10px;how should i do.Please show me right direction. Could anyone please tell me how to do it?

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>

Upvotes: 0

Views: 4810

Answers (1)

Arex
Arex

Reputation: 694

The margin in your p elements was the problem. Removing it made the height reduce.

#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>

Hopefully, this is what you need.

Upvotes: 1

Related Questions