Question

使用移动设备时，我的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>

Answer 1

为什么不使用table-responsive类？

＆＃13;

<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>

＆＃13;

Answer 2

当您使用bootstrap时，只需使用表响应类。

请点击此处：Bootstrap

Answer 3

标题未出现在开始正文标记之前。 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>

HTML中的响应表

3 个答案: