Adjust Table Footer Height

Question

Adjust Table Footer Height

2.2k Views Asked by Elcid_91 At 07 December 2025 at 07:18

I am having a difficult time adjusting the height of the table footer (tfoot).

@font-face {
  font-family: Poppins;
  src: url(./fonts/poppin/Poppins-Light.otf);
}
body{
  font-family: Poppins,arial;
  font-size: 14px;
  line-height: 1.2em;
}
.dataview{
  width: auto;
  margin: 0 auto;
  table-layout: fixed;
  border-collapse: collapse;
  border: 1px solid black;
}
.dataview thead{
  background-color: cornflowerblue;
  color: yellow;
  font-weight: bold;
}
.dataview thead tr{
  display: block;
  position: relative;
}
.dataview tbody tr:nth-last-child(1){
  border-bottom: none;
}
.dataview tbody{
  display: block;
  overflow-y: scroll;
  overflow-x: hidden;
  width: 100%;
  background-color: #f2f2f2;
}
.dataview th, .dataview td{
  padding: 5px;
  text-align: left;
}
.dataview th{
  height: 30px;
}
.dataview tr{
  border-bottom: 1px solid black
}
.dataview th.right, .dataview td.right{
  text-align:right;
}
.dataview th.center, .dataview td.center{
  text-align:center;
}
.dataview tbody tr:nth-child(even){
  background-color: #ccd8ff;
}
.dataview tbody tr:hover td{
  background-color: yellow;
}
.dataview tfoot td{  
  height: 20px;
  background-color: tomato;
  border-top: 1px solid black;
}
/* clidata-browse */
.dataview#clidata-browse{
  width: auto;
  box-sizing: border-box;
}
.dataview#clidata-browse td{
  height: 45px;
}
.dataview#clidata-browse th:nth-child(1),
.dataview#clidata-browse td:nth-child(1){
  min-width: 350px;
}
.dataview#clidata-browse th:nth-child(2),
.dataview#clidata-browse td:nth-child(2){
  min-width: 350px;
}
.dataview#clidata-browse th:nth-child(3),
.dataview#clidata-browse td:nth-child(3){
  min-width: 100px;
  padding-right:10px;
}
.dataview#clidata-browse tbody{
  height: 380px;
}

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Arrowleaf Sandbox</title>
  <meta name="description" content="The HTML5 Herald">
  <meta name="author" content="SitePoint">
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <table class="dataview" id="clidata-browse">
  <thead>
    <tr>
      <th>Customer Name</th>
      <th>Email Address</th>
      <th class="right">Balance</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        Customer 1<br>
        Customer Address
      </td>
      <td>[email protected]</td>
      <td class="right">$3000.00</td>
    </tr>
    <tr>
      <td>
        Customer 2<br>
        Customer Address
      </td>
      <td>[email protected]</td>
      <td class="right">$40.00</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>This is a test</td>
    </tr>
  </tfoot>
</table>  
</body>
</html>

Attempted to adjust the height of the tfoot tag in the css (included in the fiddle). I can increase the row height without issue but if I want the tfoot less than the size of the tbody rows it will not go smaller. Any help is appreciated.

My Fiddle

Original Q&A

There are 3 best solutions below

dreeeeeedd On 08 January 2020 at 18:23

The tfoot tag is supporting styles atributes which you can use to improve height of it. For example <tfoot styles="height:500px"

G-Cyrillus On 08 January 2020 at 18:53

If you use display:block to get your body scrolling, then you may also use flex and grid to reset the entire layout. Height can be then set on table itself.

example with scroll needed and not (border added to show where cells stand):

table {
  height: 300px;
  display: flex;
  flex-direction: column;
  text-align: left;
}

thead {
  background: turquoise;
  padding-right: 1.1em;
}

thead tr,
tbody tr {
  display: grid;
  grid-template-columns: 1fr 1fr 0.5fr;/* set column width here via fr, fit-content(),minmax(),px ,% or any value you that fits your needs best */
}

th,
td {
  padding: 0.25em;
  margin: 3px;
  border: 1px solid;
  display: block;
}

tbody {
  overflow-y: scroll;
  width: 100%;
}

tfoot {
  background: tomato;
  flex: 1;
  display: flex;
}

tfoot tr {
  flex: 1;
  margin: 3px;
  border: solid 1px;
  display: flex;
}

tfoot tr td {
  margin: auto;
  border: none;
}

<table class="dataview" id="clidata-browse">
  <thead>
    <tr>
      <th>Customer Name</th>
      <th>Email Address</th>
      <th class="right">Balance</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        Customer 1<br> Customer Address
      </td>
      <td>[email protected]</td>
      <td class="right">$3000.00</td>
    </tr>
    <tr>
      <td>
        Customer 2<br> Customer Address
      </td>
      <td>[email protected]</td>
      <td class="right">$40.00</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="3" rowspan="30">This is a test</td>
    </tr>
  </tfoot>
</table>
<hr>
<table class="dataview" id="clidata-browse">
  <thead>
    <tr>
      <th>Customer Name</th>
      <th>Email Address</th>
      <th class="right">Balance</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        Customer 1<br> Customer Address
      </td>
      <td>[email protected]</td>
      <td class="right">$3000.00</td>
    </tr>
    <tr>
      <td>
        Customer 2<br> Customer Address
      </td>
      <td>[email protected]</td>
      <td class="right">$40.00</td>
    </tr>
    <tr>
      <td>
        Customer 1<br> Customer Address
      </td>
      <td>[email protected]</td>
      <td class="right">$3000.00</td>
    </tr>
    <tr>
      <td>
        Customer 2<br> Customer Address
      </td>
      <td>[email protected]</td>
      <td class="right">$40.00</td>
    </tr>
    <tr>
      <td>
        Customer 1<br> Customer Address
      </td>
      <td>[email protected]</td>
      <td class="right">$3000.00</td>
    </tr>
    <tr>
      <td>
        Customer 2<br> Customer Address
      </td>
      <td>[email protected]</td>
      <td class="right">$40.00</td>
    </tr>
    <tr>
      <td>
        Customer 1<br> Customer Address
      </td>
      <td>[email protected]</td>
      <td class="right">$3000.00</td>
    </tr>
    <tr>
      <td>
        Customer 2<br> Customer Address
      </td>
      <td>[email protected]</td>
      <td class="right">$40.00</td>
    </tr>
    <tr>
      <td>
        Customer 1<br> Customer Address
      </td>
      <td>[email protected]</td>
      <td class="right">$3000.00</td>
    </tr>
    <tr>
      <td>
        Customer 2<br> Customer Address
      </td>
      <td>[email protected]</td>
      <td class="right">$40.00</td>
    </tr>
    <tr>
      <td>
        Customer 1<br> Customer Address
      </td>
      <td>[email protected]</td>
      <td class="right">$3000.00</td>
    </tr>
    <tr>
      <td>
        Customer 2<br> Customer Address
      </td>
      <td>[email protected]</td>
      <td class="right">$40.00</td>
    </tr>
    <tr>
      <td>
        Customer 1<br> Customer Address
      </td>
      <td>[email protected]</td>
      <td class="right">$3000.00</td>
    </tr>
    <tr>
      <td>
        Customer 2<br> Customer Address
      </td>
      <td>[email protected]</td>
      <td class="right">$40.00</td>
    </tr>
    <tr>
      <td>
        Customer 1<br> Customer Address
      </td>
      <td>[email protected]</td>
      <td class="right">$3000.00</td>
    </tr>
    <tr>
      <td>
        Customer 2<br> Customer Address
      </td>
      <td>[email protected]</td>
      <td class="right">$40.00</td>
    </tr>
    <tr>
      <td>
        Customer 1<br> Customer Address
      </td>
      <td>[email protected]</td>
      <td class="right">$3000.00</td>
    </tr>
    <tr>
      <td>
        Customer 2<br> Customer Address
      </td>
      <td>[email protected]</td>
      <td class="right">$40.00</td>
    </tr>
    <tr>
      <td>
        Customer 1<br> Customer Address
      </td>
      <td>[email protected]</td>
      <td class="right">$3000.00</td>
    </tr>
    <tr>
      <td>
        Customer 2<br> Customer Address
      </td>
      <td>[email protected]</td>
      <td class="right">$40.00</td>
    </tr>
    <tr>
      <td>
        Customer 1<br> Customer Address
      </td>
      <td>[email protected]</td>
      <td class="right">$3000.00</td>
    </tr>
    <tr>
      <td>
        Customer 2<br> Customer Address
      </td>
      <td>[email protected]</td>
      <td class="right">$40.00</td>
    </tr>
    <tr>
      <td>
        Customer 1<br> Customer Address
      </td>
      <td>[email protected]</td>
      <td class="right">$3000.00</td>
    </tr>
    <tr>
      <td>
        Customer 2<br> Customer Address
      </td>
      <td>[email protected]</td>
      <td class="right">$40.00</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="3" rowspan="30">This is a test</td>
    </tr>
  </tfoot>
</table>

**Sunny Patel** · Accepted Answer

Root Cause

It's pretty simple, and has to do with 2 competing CSS selectors for the <tfoot/>:

.dataview tfoot td{  
  height: 20px;
  background-color: tomato;
  border-top: 1px solid black;
}

And

.dataview#clidata-browse td{
  height: 45px;
}

I figured this out by inspecting the tfoot td tag:

Explanation

The latter has a higher CSS Specificity because it contains the ID Selector #clidata-browse.

Solution

To resolve this, you can do a couple of things, the easiest is to add the !important tag to .dataview tfoot td height CSS selector.

.dataview tfoot td {
  height: 20px !important;
  background-color: tomato;
  border-top: 1px solid black;
}

Alternatively, you can adjust the second selector to be the following:

.dataview#clidata-browse thead td,
.dataview#clidata-browse tbody td {
  height: 45px;
}

which avoids selecting the footer <td/> elements for a change in height.

Adjust Table Footer Height

There are 3 best solutions below

Root Cause

Explanation

Solution

Related Questions in HTML

Related Questions in CSS

Trending Questions

Popular # Hahtags

Popular Questions