修复表格何时超出导航栏和页脚

时间：2019-03-13 12:44:51

标签： html css

我的桌子正超出导航栏和页脚的宽度。如何使用HTML和/或CSS，使导航栏和页脚的宽度扩展到与表的宽度匹配。这可能吗？我遇到的所有解决方案都涉及格式化表格，而不是格式化导航栏和页脚

问题在于它会塞满浏览器视图中的所有字段，因此事情变得一团糟。任何帮助，我们将不胜感激。

enter image description here

代码：

        html,
        body {
        	height: 100%;
        	margin: 0;
        	width: 100%
        }
    
        body {
        	display: flex;
        	flex-direction: column;
        	justify-content: space-between;
        }
    
        main {
        	flex: 1;
        }
    
        .footer {
        	background-color: #003366;
        	text-align: center;
        	color: white;
        	height: 30px;
        }
    
        #footer-center {
        	color: white;
        }
    
        #footer-right {
        	float: right;
        	color: blue;
        }
        
        nav .navbar navbar-expand-lg navbar-dark bg-dark {
            width: 100%
        }
    
        .navbar-nav li:hover>.dropdown-menu {
        	display: block;
        	content: none;
        }
    
        .dropdown-menu.show {
        	background-color: #f5f6f7;
        }
    
        table.GeneratedTable {
          background-color: #ffffff;
          border-collapse: collapse;
          border-width: 2px;
          border-color: #ffcc00;
          border-style: solid;
          color: #000000;
        /*table-layout: fixed;        ---I've tried this
          width: 100%;*/
      }
    
        table.GeneratedTable td, table.GeneratedTable th {
          border-color: #ffcc00;
          border-style: solid;
        }
    
        table.GeneratedTable thead {
          background-color: #ffcc00;
        }
    <html>
    <head>
        {% load staticfiles %}
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <meta name="description" content="">
        <meta name="author" content="">
        <link rel="icon" href="../../../../favicon.ico">
        <title>Album example for Bootstrap</title>
        <!-- Bootstrap core CSS -->
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    </head>
    <body>
        <header>
            <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
                <a class="navbar-brand" href="/">
                    <img src="{% static 'logo.png' %}" height="30" width="30" class="d-inline-block align-top"> Website</a>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarSupportedContent">
                    <ul class="navbar-nav mr-auto">
                        <li class="nav-item">
                            <a class="nav-link" href="#">NavItem</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">NavItem</a>
                        </li>
                    </ul>
                </div>
            </nav>
        </header>
    
        <main class='wrapper'>
            <br>
            <br>
            <table class="GeneratedTable">
              <thead>
                <tr>
                  <th>Header</th>
                  <th>Header</th>
                  <th>Header</th>
                  <th>Header</th>
                  <th>Header</th>
                  <th>Header</th>
                  <th>Header</th>
                  <th>Header</th>
                  <th>Header</th>
                  <th>Header</th>
                  <th>Header</th>
                  <th>Header</th>
                  <th>Header</th>
                  <th>Header</th>
                  <th>Header</th>
                  <th>Header</th>
                  <th>Header</th>
                  <th>Header</th>
                  <th>Header</th>
                  <th>Header</th>
                  <th>Header</th>
                  <th>Header</th>
                  <th>Header</th>
                  <th>Header</th>
                  <th>Header</th>
                  <th>Header</th>
                  <th>Header</th>
                  <th>Header</th>
                  <th>Header</th>
                  <th>Header</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>Cell</td>
                  <td>Cell</td>
                  <td>Cell</td>
                  <td>Cell</td>
                  <td>Cell</td>
                  <td>Cell</td>
                  <td>Cell</td>
                  <td>Cell</td>
                  <td>Cell</td>
                  <td>Cell</td>
                  <td>Cell</td>
                  <td>Cell</td>
                  <td>Cell</td>
                  <td>Cell</td>
                  <td>Cell</td>
                  <td>Cell</td>
                  <td>Cell</td>
                  <td>Cell</td>
                  <td>Cell</td>
                  <td>Cell</td>
                  <td>Cell</td>
                  <td>Cell</td>
                  <td>Cell</td>
                  <td>Cell</td>
                  <td>Cell</td>
                  <td>Cell</td>
                  <td>Cell</td>
                  <td>Cell</td>
                  <td>Cell</td>
                  <td>Cell</td>
                </tr>
                <tr>
                  <td>Cell</td>
                  <td>Cell</td>
                  <td>Cell</td>
                  <td>Cell</td>
                  <td>Cell</td>
                  <td>Cell</td>
                  <td>Cell</td>
                  <td>Cell</td>
                  <td>Cell</td>
                  <td>Cell</td>
                  <td>Cell</td>
                  <td>Cell</td>
                  <td>Cell</td>
                  <td>Cell</td>
                  <td>Cell</td>
                  <td>Cell</td>
                  <td>Cell</td>
                  <td>Cell</td>
                  <td>Cell</td>
                  <td>Cell</td>
                  <td>Cell</td>
                  <td>Cell</td>
                  <td>Cell</td>
                  <td>Cell</td>
                  <td>Cell</td>
                  <td>Cell</td>
                  <td>Cell</td>
                  <td>Cell</td>
                  <td>Cell</td>
                  <td>Cell</td>
                </tr>
                <tr>
                  <td>Cell</td>
                  <td>Cell</td>
                  <td>Cell</td>
                  <td>Cell</td>
                  <td>Cell</td>
                  <td>Cell</td>
                  <td>Cell</td>
                  <td>Cell</td>
                  <td>Cell</td>
                  <td>Cell</td>
                  <td>Cell</td>
                  <td>Cell</td>
                  <td>Cell</td>
                  <td>Cell</td>
                  <td>Cell</td>
                  <td>Cell</td>
                  <td>Cell</td>
                  <td>Cell</td>
                  <td>Cell</td>
                  <td>Cell</td>
                  <td>Cell</td>
                  <td>Cell</td>
                  <td>Cell</td>
                  <td>Cell</td>
                  <td>Cell</td>
                  <td>Cell</td>
                  <td>Cell</td>
                  <td>Cell</td>
                  <td>Cell</td>
                  <td>Cell</td>
                </tr>
              </tbody>
            </table>
        </main>
        <div class="footer">
            <div class="container">
                <div id="footer-center">Copyright © Company Name {% now "Y" %}
                    <div id="footer-right"><a href="#" class="text-muted">Back to top</a></div>
                    <div style="clear: both"></div>
                </div>
            </div>
    	</div>
        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
    	<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.js"></script>
    </body>
    </html>

4 个答案:

答案 0 :(得分：1)

我认为最好的方法是将页脚和菜单设置为position: fixed。这意味着无论您在页面上的何处滚动，这些对象都将保留在同一位置。

我已经在下面的页脚中完成了此操作：

.footer {
    background-color: #003366;
    text-align: center;
    color: white;
    height: 30px;
    left: 0;
    bottom: 0;
    width: 100%;
    position: fixed;
}

导航栏的工作方式类似，但是您需要定位header标签：

header {
    background-color: #003366;
    text-align: center;
    color: white;
    height: 30px;
    left: 0;
    top: 0;
    width: 100%;
    position: fixed;
}

此外，要更改表格在页面上的位置，您可以使用margin-top，可以将其设置为%或px。

希望这会有所帮助。

答案 1 :(得分：0)

由于您的表格包含在.wrapper类的元素中，因此您可以将overflow: auto添加到该div中。这是不理想的，因为表格仍会比页面宽，但这意味着表格会滚动而不是页面本身。

将代码段放大为完整大小以查看结果。

<html>
<head>

    <style>
    html,
    body {
        height: 100%;
        margin: 0;
        width: 100%;
    }

    body {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    main {
        flex: 1;
    }

    .footer {
        background-color: #003366;
        text-align: center;
        color: white;
        height: 30px;
    }

    #footer-center {
        color: white;
    }

    #footer-right {
        float: right;
        color: blue;
    }

    nav .navbar navbar-expand-lg navbar-dark bg-dark {
        width: 100%
    }

    .navbar-nav li:hover>.dropdown-menu {
        display: block;
        content: none;
    }

    .dropdown-menu.show {
        background-color: #f5f6f7;
    }
    
    .wrapper{
      overflow: auto;
    }

    table.GeneratedTable {
      width: 100%;
      max-width: 100%;
      background-color: #ffffff;
      border-collapse: collapse;
      border-width: 2px;
      border-color: #ffcc00;
      border-style: solid;
      color: #000000;
  }

    table.GeneratedTable td, table.GeneratedTable th {
      border-color: #ffcc00;
      border-style: solid;
    }

    table.GeneratedTable thead {
      background-color: #ffcc00;
    }
    </style>

    {% load staticfiles %}
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="../../../../favicon.ico">
    <title>Album example for Bootstrap</title>
    <!-- Bootstrap core CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
</head>
<body>
    <header>
        <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
            <a class="navbar-brand" href="/">
                <img src="{% static 'logo.png' %}" height="30" width="30" class="d-inline-block align-top"> Website</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav mr-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="#">NavItem</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">NavItem</a>
                    </li>
                </ul>
            </div>
        </nav>
    </header>

    <main class='wrapper'>
        <br>
        <br>
        <table class="GeneratedTable">
          <thead>
            <tr>
              <th>Header</th>
              <th>Header</th>
              <th>Header</th>
              <th>Header</th>
              <th>Header</th>
              <th>Header</th>
              <th>Header</th>
              <th>Header</th>
              <th>Header</th>
              <th>Header</th>
              <th>Header</th>
              <th>Header</th>
              <th>Header</th>
              <th>Header</th>
              <th>Header</th>
              <th>Header</th>
              <th>Header</th>
              <th>Header</th>
              <th>Header</th>
              <th>Header</th>
              <th>Header</th>
              <th>Header</th>
              <th>Header</th>
              <th>Header</th>
              <th>Header</th>
              <th>Header</th>
              <th>Header</th>
              <th>Header</th>
              <th>Header</th>
              <th>Header</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>Cell</td>
              <td>Cell</td>
              <td>Cell</td>
              <td>Cell</td>
              <td>Cell</td>
              <td>Cell</td>
              <td>Cell</td>
              <td>Cell</td>
              <td>Cell</td>
              <td>Cell</td>
              <td>Cell</td>
              <td>Cell</td>
              <td>Cell</td>
              <td>Cell</td>
              <td>Cell</td>
              <td>Cell</td>
              <td>Cell</td>
              <td>Cell</td>
              <td>Cell</td>
              <td>Cell</td>
              <td>Cell</td>
              <td>Cell</td>
              <td>Cell</td>
              <td>Cell</td>
              <td>Cell</td>
              <td>Cell</td>
              <td>Cell</td>
              <td>Cell</td>
              <td>Cell</td>
              <td>Cell</td>
            </tr>
            <tr>
              <td>Cell</td>
              <td>Cell</td>
              <td>Cell</td>
              <td>Cell</td>
              <td>Cell</td>
              <td>Cell</td>
              <td>Cell</td>
              <td>Cell</td>
              <td>Cell</td>
              <td>Cell</td>
              <td>Cell</td>
              <td>Cell</td>
              <td>Cell</td>
              <td>Cell</td>
              <td>Cell</td>
              <td>Cell</td>
              <td>Cell</td>
              <td>Cell</td>
              <td>Cell</td>
              <td>Cell</td>
              <td>Cell</td>
              <td>Cell</td>
              <td>Cell</td>
              <td>Cell</td>
              <td>Cell</td>
              <td>Cell</td>
              <td>Cell</td>
              <td>Cell</td>
              <td>Cell</td>
              <td>Cell</td>
            </tr>
            <tr>
              <td>Cell</td>
              <td>Cell</td>
              <td>Cell</td>
              <td>Cell</td>
              <td>Cell</td>
              <td>Cell</td>
              <td>Cell</td>
              <td>Cell</td>
              <td>Cell</td>
              <td>Cell</td>
              <td>Cell</td>
              <td>Cell</td>
              <td>Cell</td>
              <td>Cell</td>
              <td>Cell</td>
              <td>Cell</td>
              <td>Cell</td>
              <td>Cell</td>
              <td>Cell</td>
              <td>Cell</td>
              <td>Cell</td>
              <td>Cell</td>
              <td>Cell</td>
              <td>Cell</td>
              <td>Cell</td>
              <td>Cell</td>
              <td>Cell</td>
              <td>Cell</td>
              <td>Cell</td>
              <td>Cell</td>
            </tr>
          </tbody>
        </table>
    </main>
    <div class="footer">
        <div class="container">
            <div id="footer-center">Copyright © Company Name {% now "Y" %}
                <div id="footer-right"><a href="#" class="text-muted">Back to top</a></div>
                <div style="clear: both"></div>
            </div>
        </div>
    </div>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
    <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.js"></script>
</body>
</html>

答案 2 :(得分：0)

一个使用javaScript的简单示例。我试图使其尽可能接近您的具体情况。

您只需要获取表格的宽度并将其设置为所需的页眉/页脚或其他元素

(function() {
  const header = document.querySelector('header')
  const footer = document.querySelector('.footer')
  const tableWidth = document.querySelector('.GeneratedTable').offsetWidth
  header.style.width = `${tableWidth}px`
  footer.style.width = `${tableWidth}px`
})(); 
table {
  width: 3000px;
  background: black;
}

header {
  height: 10px;
  background: red;
}

footer {
  height: 10px;
  background: blue;
}
<header></header>
<table class="GeneratedTable">
  <tr>
    <td>aaaa</td>
  </tr>
</table>
<footer class="footer"></footer>

答案 3 :(得分：0)

让表格横向滚动，如果移动优先，页面的其余部分可以正常样式

<div style="overflow-x:auto;">
  <table>
    ...
  </table>
</div>

相关问题
最新问题