CODEWITHSUNDEEP
htmlcss
Jim Macaulay
Jim Macaulay

Reputation: 5165

Resize height of a cell in a html table

Resize height of a cell in a table.

<table>
  <tr>
    <th style="border: 1px solid black; border-color: #96D4D4; height:5px">Amount1</th>
    <td style="border: 1px solid black; border-color: #96D4D4;">50</td>
  </tr>
  <tr>
    <th style="border: 1px solid black; border-color: #96D4D4; height:5px">Amount2</th>
    <td style="border: 1px solid black; border-color: #96D4D4;">50</td>
  </tr>
  <tr>
    <th style="border: 1px solid black; border-color: #96D4D4; height:5px">Total</th>
    <td style="border: 1px solid black; border-color: #96D4D4;">100</td>
  </tr>
</table>

The result is,

enter image description here

I want the size of the cell border to be reduced less than 10px, though height is provided as 5px, it is not reducing the sized. How can I resolve this?

Upvotes: -1

Views: 79

Answers (1)

Nizamuddin Shaikh
Nizamuddin Shaikh

Reputation: 420

You can reduce height of the last row putting style="line-height: 5px;" at that level, like:

<table>
    <tr>
      <th style="border: 1px solid black; border-color: #96D4D4; height:5px">Amount1</th>
      <td style="border: 1px solid black; border-color: #96D4D4;">50</td>
    </tr>
    <tr>
      <th style="border: 1px solid black; border-color: #96D4D4; height:5px">Amount2</th>
      <td style="border: 1px solid black; border-color: #96D4D4;">50</td>
    </tr>
    <tr style="line-height: 5px;">
      <th style="border: 1px solid black; border-color: #96D4D4; height:5px">Total</th>
      <td style="border: 1px solid black; border-color: #96D4D4;">100</td>
    </tr>
  </table>

Or if you want to reduce height of all rows, the same may be put at table level.

Upvotes: 1

Related Questions