Home / Questions / 40610
Accepted
El Cóndor
Asked: 2020-12-23 12:17:30 +0800 CST 2020-12-23 12:17:30 +0800 CST

How to customize the height of a row in an HTML table?

  • 772

I have the following code htmlto create a table, I put it as an example, I want the rows of my table to look wider (if it works) and the same rows to look higher (it doesn't work), doing some research I found what Next:

The attribute heightdoes not work in all browsers, and its use is not widespread. The cells usually have the height they need to fit all the content that has been inserted, that is, they grow enough to fit what we have placed inside.

Can I do what I want directly in HTMLor should it be done with CSS?

  <table>
      <tr style="width:130%; height:150%;">
        <td>Enero</td>
        <td>$100</td>
      </tr>
      <tr>
        <td>Febrero</td>
        <td>$80</td>
      </tr>
    </table>
html

2 Answers

  1. Best Answer

    For that purpose use:

    • min-width (for width)
    • height (which gives you the actual height)
    • min-height (the minimum height)
    • max-height (the maximum height)

    .headt td {
  min-width: 235px;
  height: 100px;
  background-color: #433;
}

table {
  color: #4ef;
}
    <table>
  <tr class="headt">
    <td>Enero</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>Febrero</td>
    <td>$80</td>
  </tr>
</table>

    Note: You can't use percentages because to put it that way, its parent elementmust have an explicit height, which it doesn't.

    • 6

  2. With CSS you could use height, to indicate the height.

    Example:

    table {
  border: 1px solid #000;
  border-collapse: collapse;
}
table td {
  border: 1px solid #000;
  text-align: center;
  padding: 5px;
  /* Alto de las celdas */
  height: 70px;
}
    <table>
  <tr>
    <td>Enero</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>Febrero</td>
    <td>$80</td>
  </tr>
</table>

    Note : min-heightand max-heightapplied directly on a tddo not work, since according to specthe effect on these is not defined:

    In CSS 2.1, the effect of 'min-height' and 'max-height' on tables, inline tables, table cells , table rows, and row groups is undefined .

    • 3