Question 341062 in Html Question posted in
Some basic documentation can be found here.

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. Any suggestion would be appreciated

Tags:

2

Answers


  1. 0

    The <div> element is used to wrap the content inside each <th> (table header) cell. The height: 5px; style applied to the <div> sets the height of the header cell to 5 pixels.

    This approach provides a way to control the height of specific cells in the table while allowing for additional styling flexibility.

    <table>
  <tr>
    <th>
      <div style="border: 1px solid black; border-color: #96D4D4; height:5px">
        Amount1
      </div>
    </th>
    <td style="border: 1px solid black; border-color: #96D4D4;">50</td>
  </tr>
  <tr>
    <th>
      <div style="border: 1px solid black; border-color: #96D4D4; height:5px">
        Amount2
      </div>
    </th>
    <td style="border: 1px solid black; border-color: #96D4D4;">50</td>
  </tr>
  <tr>
    <th>
      <div style="border: 1px solid black; border-color: #96D4D4; height:5px">
        total
      </div>
    </th>
    <td style="border: 1px solid black; border-color: #96D4D4;">100</td>
  </tr>
</table>
    Login or Signup to reply.
  2. 0

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search