Search code examples
htmlcsshtml-table

html table creates two rows all equal size and ignores height attributes

body {
  padding: 0;
  margin: 0;
  background-image: none;
}

.tableFull {
  table-layout: auto;
  width: 100vw;
  height: 100vh;
}

.mainRow1 {
  background-color: #7DD2CD;
  height: 10px;
}

.mainRow2 {
  background-color: gray;
}
<table class="tableFull">
  <tr>
    <td class="mainRow1">
    </td>
  </tr>
  <tr>
    <td class="mainRow2">
      test
    </td>
  </tr>
</table>

I am trying to create a table with a small first row and the rest of the page is supposed to be the rest of the page.

so like a 10 - 90 % distribution.

But when I create my table (that spans the whole page) the result is two rows that are 50 50, allthough I am cleary telling the first row to just be 10px in height (just to see what would happen) but that just gets totally ignored.

What is wrong?

enter image description here

Solution

  • With empty cells, this will work, but if you have something in the cells, you can set it a height:

    <body>
    <table class="tableFull">
        <tr >
            <td class="mainRow1">
              <!-- 👇 -->
              <div style="height: 10px;">asd<br>asd</div>
            </td>
        </tr>
        <tr >
            <td class="mainRow2">
                test
            </td>
        </tr>
    </table>
</body>

<style type="text/css">

    body {
        padding: 0;
        margin: 0;
        background-image: none;
    }

    .tableFull{
        width: 100vw;
        height: 100vh;
    }

    .mainRow1{
        background-color: #7DD2CD;
        height:10px;
    }

    .mainRow2 {
        background-color: gray;
    }

 
</style>