CODEWITHSUNDEEP
c#htmlfooter
Max Pooling
Max Pooling

Reputation: 11

Table footer always at bottom and horizontal scrolling?

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>

Upvotes: 1

Views: 486

Answers (0)

Related Questions