Table footer always at bottom and horizontal scrolling?

user_11258192 0
Viewed 72

How to footer float to bottom and horizantal scroll working correctly with thead and tbody ?

I tried to it, But it dont work horizontal scroll correctly when footer position:fixed , position:absolute and other state.And is it Possible to work without tbody:after css ?

 <body>
                <table><thead>
                    <tr>
                      <th>Month</th>
                      <th>Savings</th>
                      <th>TestHeader1</th>
                      <th>TestHeader2</th>A
                      <th>TestHeader3</th>
                      <th>TestHeader4</th>
                      <th>TestHeader5</th>
                      <th>TestHeader6</th>
                      <th>TestHeader7</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <td>January</td>
                      <td>100</td>
                      <td>101</td>
                      <td>102</td>
                      <td>103</td>
                      <td>104</td>
                      <td>105</td>
                      <td>106</td>
                      <td>107</td>
                    </tr>
                    <tr>
                      <td>February</td>
                      <td>80</td>
                      <td>81</td>
                      <td>82</td>
                      <td>83</td>
                      <td>84</td>
                      <td>85</td>
                      <td>86</td>
                      <td>87</td>
                    </tr>
                  </tbody>
                  <tfoot>
                    <tr>
                      <td>Sum</td>
                      <td>180</td>
                      <td>182</td>
                      <td>184</td>
                      <td>186</td>
                      <td>188</td>
                      <td>190</td>
                      <td ></td>
                      <td >194</td>
                    </tr>
                 </tfoot>
                </table>
                </body>

Image

styles html, body { height: 100%; margin: 0; }

table, th, td {
  border: 1px solid black;
}
 tbody:after
    {
        background-color:orange;
        height:100px;
        content: "";
        display: block;
    }
</style>
footer html c#
1 Answers

You can set a sticky position for footer tag and set inset-block-end for fixed footer in bottom

table,
th,
td {
  border: 1px solid black;
}
tbody:after {
  background-color: orange;
  height: 1000px;
  content: "";
  display: block;
}

table tfoot {
  position: sticky;
  background-color: white;
}
table tfoot {
  inset-block-end: 0; /* "for fixed in bottom" */
}
<!DOCTYPE html>
<html>
<head>
  <title>Another simple example</title>
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
  <body>
    <table><thead>
        <tr>
          <th>Month</th>
          <th>Savings</th>
          <th>TestHeader1</th>
          <th>TestHeader2</th>A
          <th>TestHeader3</th>
          <th>TestHeader4</th>
          <th>TestHeader5</th>
          <th>TestHeader6</th>
          <th>TestHeader7</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>January</td>
          <td>100</td>
          <td>101</td>
          <td>102</td>
          <td>103</td>
          <td>104</td>
          <td>105</td>
          <td>106</td>
          <td>107</td>
        </tr>
        <tr>
          <td>February</td>
          <td>80</td>
          <td>81</td>
          <td>82</td>
          <td>83</td>
          <td>84</td>
          <td>85</td>
          <td>86</td>
          <td>87</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td>Sum</td>
          <td>180</td>
          <td>182</td>
          <td>184</td>
          <td>186</td>
          <td>188</td>
          <td>190</td>
          <td ></td>
          <td >194</td>
        </tr>
     </tfoot>
    </table>
    </body>
</body>
</html>

user_162122160
Related