HTML 中的响应式表格答案

【问题标题】：Responsive table in HTMLHTML 中的响应式表格
【发布时间】：2017-08-29 20:59:33
【问题描述】：

我的 HTML 表格在使用移动设备时没有响应：

下面是我的代码 - 它在桌面上运行良好，但在移动设备上却不行 - 如果在移动设备上设计可以变成垂直的，或者我可以在桌子上隐藏三行？

<html>
<header>
<style>
#results {
    list-style-type: none;
    margin: 0;
    padding: 15px;
    overflow: hidden;
    background-color: #f38f2f;
}
#list {
    float: left;
}
#list a {
    display: block;
    color: white;
    text-align: center;
    padding: 20px;
    text-decoration: none;
}

#list a:hover {
    background-color: #ff8000;
}
</style>
    <div class="main menu">
        <div class="container-fluid">
            <div class="row">
                    <div class="main navigation">
                        <ul id="results">
                            <li id="list"><a style="color:white" href="#week1">Week 1 Results</a></li>
                            <li id="list"><a style="color:white" href="#week2">Week 2 Results</a></li>
                            <li id="list"><a style="color:white" href="">Week 3 Results</a></li>
                            <li id="list"><a style="color:white" href="">Week 4 Results</a></li>
                            <li id="list"><a style="color:white" href="">Week 5 Results</a></li>
                            <li id="list"><a style="color:white" href="">Week 6 Results</a></li>
                            <li id="list"><a style="color:white" href="">Week 7 Results</a></li>
                            <li id="list"><a style="color:white" href="">Week 8 Results</a></li>
                        </ul>
                    </div>
            </div>
        </div>
    </div>
</header>

<body>  
    <style>
        table { width: 100% }
        table, th, td {
        border: 3px solid black;
        color: white;
        }

        th, td {
        padding: 15px;
        text-align: center;
        }

        th {
        text: strong;
        font-size: 150%;
        }
    </style>
    <div class="week1" id="week1"></div>
    <h1 style="color:white;">Week 1 Results</h1>

<table style="width:100%">
  <tr>
    <th>Teams</th>
    <th>Result</th> 
    <th>Home Win</th>
    <th>Draw</th>
    <th>Away Win</th>
  </tr>
  <tr>
    <td>Manchester United v Swansea</td>
    <td>4 - 0</td>
    <td>x</td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td>Juventus v AC Milan</td>
    <td>2 - 2</td>
    <td></td>
    <td>x</td>
    <td></td>
  </tr>
 <tr>
    <td>Real Madrid v Grenada</td>
    <td>0 - 2</td>
    <td></td>
    <td></td>
    <td>x</td>
  </tr>
</table>

<div class="week2" id="week2"></div>
<h1 style="color:white">Week 2 results</h1>

<table style="width:100%">
  <tr>
    <th>Teams</th>
    <th>Result</th> 
    <th>Home Win</th>
    <th>Draw</th>
    <th>Away Win</th>
  </tr>
  <tr>
    <td>Manchester United v Swansea</td>
    <td>4 - 0</td>
    <td>x</td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td>Juventus v AC Milan</td>
    <td>2 - 2</td>
    <td></td>
    <td>x</td>
    <td></td>
  </tr>
 <tr>
    <td>Real Madrid v Grenada</td>
    <td>0 - 2</td>
    <td></td>
    <td></td>
    <td>x</td>
  </tr>
</table>
</body>
</html>

【问题讨论】：

第一次编写 HTML，所以还在学习细节，下面的引导链接帮助我让它响应并按照我想要的方式工作
是的，它可以在桌面上运行，也可以在移动设备上运行。

标签： html responsive-design

【解决方案1】：

为什么不使用table-responsive 类？

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container-fluid">
 <div class="row"> 
   <div class="table-responsive">
      <table style="width:100%" class="table">
        <tr>
          <th>Teams</th>
          <th>Result</th> 
          <th>Home Win</th>
          <th>Draw</th>
          <th>Away Win</th>
        </tr>
        <tr>
          <td>Manchester United v Swansea</td>
          <td>4 - 0</td>
          <td>x</td>
          <td></td>
          <td></td>
        </tr>
        <tr>
          <td>Juventus v AC Milan</td>
          <td>2 - 2</td>
          <td></td>
          <td>x</td>
          <td></td>
        </tr>
       <tr>
          <td>Real Madrid v Grenada</td>
          <td>0 - 2</td>
          <td></td>
          <td></td>
          <td>x</td>
        </tr>
      </table>
    </div>
  </div>
</div>

【讨论】：

添加了额外的容器流体，
就像一个绝对的魅力，谢谢！

第一次写 HTML 还在学习响应式，谢谢你的帮助

@DSmith 没问题，很高兴能提供帮助。一定要查看 Bootstrap 的文档。在处理响应式设计（尤其是网格系统）时，它有很大的帮助，您将节省大量的样式时间：getbootstrap.com/docs/3.3

【解决方案2】：

当您使用引导程序时，只需使用表响应类。

请在此处查看：Bootstrap

【讨论】：

【解决方案3】：

header 不会出现在开始的 body 标记之前。 https://www.w3schools.com/html/default.asp https://www.w3schools.com/bootstrap/bootstrap_tables.asp

<html>
<head>
<style>
#results {
    list-style-type: none;
    margin: 0;
    padding: 15px;
    overflow: hidden;
    background-color: #f38f2f;
}
#list {
    float: left;
}
#list a {
    display: block;
    color: white;
    text-align: center;
    padding: 20px;
    text-decoration: none;
}

#list a:hover {
    background-color: #ff8000;
}
</style>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" />

</header>

<body>
    <div class="main menu">
        <div class="container-fluid">
            <div class="row">
                <div class="main navigation">
                    <ul id="results">
                        <li id="list"><a style="color:white" href="#week1">Week 1 Results</a></li>
                        <li id="list"><a style="color:white" href="#week2">Week 2 Results</a></li>
                        <li id="list"><a style="color:white" href="">Week 3 Results</a></li>
                        <li id="list"><a style="color:white" href="">Week 4 Results</a></li>
                        <li id="list"><a style="color:white" href="">Week 5 Results</a></li>
                        <li id="list"><a style="color:white" href="">Week 6 Results</a></li>
                        <li id="list"><a style="color:white" href="">Week 7 Results</a></li>
                        <li id="list"><a style="color:white" href="">Week 8 Results</a></li>
                    </ul>
                </div>
                </div>
            </div>
        </div>

    <div class="week1" id="week1"></div>
    <h1 style="color:white;">Week 1 Results</h1>
    <div class="table-responsive">
        <table class="table table-striped">
              <tr>
                <th>Teams</th>
                <th>Result</th> 
                <th>Home Win</th>
                <th>Draw</th>
                <th>Away Win</th>
              </tr>
              <tr>
                <td>Manchester United v Swansea</td>
                <td>4 - 0</td>
                <td>x</td>
                <td></td>
                <td></td>
              </tr>
              <tr>
                <td>Juventus v AC Milan</td>
                <td>2 - 2</td>
                <td></td>
                <td>x</td>
                <td></td>
              </tr>
             <tr>
                <td>Real Madrid v Grenada</td>
                <td>0 - 2</td>
                <td></td>
                <td></td>
                <td>x</td>
              </tr>
            </table>
        </table>
        </div>
    <div class="week2" id="week2"></div>
    <h1 style="color:white">Week 2 results</h1>

    <div class="table-responsive">
        <table class="table table-striped">
          <tr>
            <th>Teams</th>
            <th>Result</th> 
            <th>Home Win</th>
            <th>Draw</th>
            <th>Away Win</th>
          </tr>
          <tr>
            <td>Manchester United v Swansea</td>
            <td>4 - 0</td>
            <td>x</td>
            <td></td>
            <td></td>
          </tr>
          <tr>
            <td>Juventus v AC Milan</td>
            <td>2 - 2</td>
            <td></td>
            <td>x</td>
            <td></td>
          </tr>
         <tr>
            <td>Real Madrid v Grenada</td>
            <td>0 - 2</td>
            <td></td>
            <td></td>
            <td>x</td>
          </tr>
        </table>
    </div>
    <br/>
    <br/>
    <br/>
</body>
</html>

【讨论】：