Stop table row height from filling whole table body

user_17936281 0
Viewed 36

I have a table, when I add a row to it, the row's height will fill the whole body of the table. I want to force the height to only be around 10% of the tables body height, and let the rest of the tabe body to be empty. I've tried adding a height propery of 10% to the tbody tr selector but nothing happens. My goal is to have a row take up about 10% of the open area, and then when I click add row, another one will appear under it until the whole table body is full of rows.

Here is my code

#home-index {
  margin-top: 10px;
}

tbody {
  height: 604px;
}

td {
  border: 1px solid lightgray;
}

.hours-cell:hover {
  background-color: darkorange;
}

tr {
  border: 1px solid lightgray;
}

th {
  border: 1px solid lightgray;
}

.dropdown {
  width: 25%
}
<table>
  <thead>
    <tr>
      <th>Project</th>
      <th>Task</th>
      <th>7/11</th>
      <th>7/12</th>
      <th>7/13</th>
      <th>Total Hours</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="dropdown">
        <select asp-for="Project" asp-items="Model.Projects"></select>
      </td>
      <td class="dropdown">
        <select asp-for="Task"></select>
      </td>
      <td class="hours-cell">--</td>
      <td class="hours-cell">--</td>
      <td class="hours-cell">--</td>
      <td></td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="2">Overall Totals</td>
      <td class="hours-cell">--</td>
      <td class="hours-cell">--</td>
      <td class="hours-cell">--</td>
      <td></td>
    </tr>
    <tr>
      <td colspan="2">Over/Under</td>
      <td class="hours-cell">--</td>
      <td class="hours-cell">--</td>
      <td class="hours-cell">--</td>
      <td></td>
    </tr>
  </tfoot>
</table>

html-table css html javascript
1 Answers

I hope this helps your problem. I added an empty <tr> at the very end of the body with a different class. You can style this row however you like to make it look like an empty body. Any rows you add should be added above this one.

#home-index {
  margin-top: 10px;
}

tbody {
  height: 604px;
}

td {
  border: 1px solid lightgray;
}

.hours-cell:hover {
  background-color: darkorange;
}

tr {
  border: 1px solid lightgray;
}

th {
  border: 1px solid lightgray;
}

.dropdown {
  width: 25%
}

tbody tr {
  height: 10%
}

.extra {
  height: 100%
}
<table>
  <thead>
    <tr>
      <th>Project</th>
      <th>Task</th>
      <th>7/11</th>
      <th>7/12</th>
      <th>7/13</th>
      <th>Total Hours</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="dropdown">
        <select asp-for="Project" asp-items="Model.Projects"></select>
      </td>
      <td class="dropdown">
        <select asp-for="Task"></select>
      </td>
      <td class="hours-cell">--</td>
      <td class="hours-cell">--</td>
      <td class="hours-cell">--</td>
      <td></td>
    </tr>
    <tr class="extra">

    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="2">Overall Totals</td>
      <td class="hours-cell">--</td>
      <td class="hours-cell">--</td>
      <td class="hours-cell">--</td>
      <td></td>
    </tr>
    <tr>
      <td colspan="2">Over/Under</td>
      <td class="hours-cell">--</td>
      <td class="hours-cell">--</td>
      <td class="hours-cell">--</td>
      <td></td>
    </tr>
  </tfoot>
</table>

user_169252810
Related