ページング(および一覧表示)の際のページ番号がコンテンツとかぶってしまう

前提・実現したいこと

閲覧ありがとうございます。
現在、DB内のデータを抽出しブラウザに一覧表示するものを作成しています。
1ページ当たりの表示件数(10件、50件、100件等)の変更や、ページング機能の作成は完了しました。
両機能とも動作は問題なく機能しており、あとはCSSの調整という段階です。

発生している問題・エラーメッセージ

発生している問題点としては、
①表示件数を50件、100件とした際に、ページ番号がコンテンツの上に重なってしまう
※position:fixedを使用してページの最下部に固定することはできるのですが、
※スクロール時にはコンテンツの上にかぶったままの移動となってしまいます。

②表示しているデータ(table形式)の下に余白を作れない
※tableの最後が表示された段階で、それ以上スクロールが出来なくなり
※ページ番号と重なる問題も併せて一番下の数行を見ることが出来ません
※margin_bootom等で余白を作ろうとしたものの、divの指定がうまくいかず
※検証ツールで確認したらtableではなくあらぬところをdivで認識していました。

該当のソースコード

HTML
1※中のコードは省いています
2<div class="books_table">
3　　<table class="books">
4　　　<thead>
5      　<tr></tr>
6　　　</thead>
7　　　　<th></th>
8　　　　<th></th>
9　　　　<th></th>
10　　</table>
11</div>
12
13<div class="footer" style="text-align: center">
14  <ul>
15　　<li></li>
16　　<li></li>
17　</ul>
18</div>

css
1/* ===書籍一覧の設定============================================================= */
2table.books{
3  table-layout: fixed;
4  width: 90%;
5  margin-left: 20px;
6  height: 200px;
7  border-collapse: collapse;
8  position: absolute;
9  z-index: 10;
10  top: 185px;
11}
12
13table.books td{
14  width: 100%;
15  padding: 5px;
16  white-space: nowrap;
17  overflow: hidden;
18  text-overflow: ellipsis;
19  border:1px solid gray;
20}
21/* ===フッダーの設定============================================================= */
22.footer{
23  height: 50px;
24  width: 100%;
25  position: fixed;
26  bottom: 0;
27  z-index: 30;
28}
29
30.footer ul{
31  list-style: none;
32}
33
34.footer li{
35  display: inline;
36  margin:10px;
37}

よろしくお願いします。

行動規範の内容に同意します

回答1件

ベストアンサー

他の要素との兼ね合いもあるかもしれませんが、このようにcssを修正してはどうでしょうか。

css
1table.books{
2	table-layout: fixed;
3	width: 90%;
4	margin-left: 20px;
5	/*height: 200px; 削除*/
6	border-collapse: collapse;
7	/*position: absolute; 削除*/
8	/*z-index: 10; 削除*/
9	/*top: 185px; 削除*/
10}
11
12.footer{
13	/*height: 50px; 削除*/
14	width: 100%;
15	position: fixed;
16	bottom: 0;
17	z-index: 30;
18	padding: 10px; /*追加*/
19	background-color: #fff; /*追加*/
20}
21
22/*追加*/
23.books_table{
24	padding-top: 185px;
25	padding-bottom: 50px;
26}