javascript - 我如何让我的结果连续显示？

Question

$(document).ready(function() {
  $("#submitForecast").click(function() {
    return getForecast();
  });
});

function getForecast() {
  var city = $("#city").val();
  var days = $("#days").val();

  if (city != '' && days != '') {

    $.ajax({
      url: 'http://api.openweathermap.org/data/2.5/forecast/daily?q=' + city + "&units=metric" + "&cnt=" + days + "&APPID=c10bb3bd22f90d636baa008b1529ee25",
      type: "GET",
      dataType: "jsonp",
      success: function(data) {
        var table = '';
        var header = '<h2 style="font-weight:bold; font-size:30px; margin-top:20px;">Weather forecast for ' + data.city.name + ', ' + data.city.country + '</h2>'
        for (var i = 0; i < data.list.length; i++) {
          table += "<tr>";
          table += "<td><img src='http://openweathermap.org/img/w/" + data.list[i].weather[0].icon + ".png'></td>";
          table += "<td>" + data.list[i].weather[0].main + "</td>";
          table += "<td>" + data.list[i].weather[0].description + "</td>";
          table += "<td>" + data.list[i].temp.morn + "&deg;C</td>";
          table += "<td>" + data.list[i].temp.night + "&deg;C</td>";
          table += "<td>" + data.list[i].temp.min + "&deg;C</td>";
          table += "<td>" + data.list[i].temp.max + "&deg;C</td>";
          table += "<td>" + data.list[i].pressure + "hpa</td>";
          table += "<td>" + data.list[i].humidity + "%</td>";
          table += "<td>" + data.list[i].speed + "m/s</td>";
          table += "<td>" + data.list[i].deg + "&deg;</td>";
          table += "</tr>";
        }

        $("#forecastWeather").html(table);
        $("#header").html(header);

        $("#city").val('');
        $("#days").val('')
      }
    });

  } else {
    $("#error").html("<div class='alert alert-danger' id='errorCity'><a href='#' class='close' data-dismiss='alert' aria-label='close'>&times;</a>City field cannot be empty</div>");
  }
}

body {
    font-family: 'Tangerine', serif;
    background-color: #ffffff;
    font-size: 20px;
    margin: 0;
    padding: 0;
}

#nav_bar {
    margin-bottom: 0px;
    padding: 0;
    background-color: white;
    border: none;
}

.weather {
    color: #4aa1f3 !important;
    font-size: 25px;
    font-weight: 600;
}

#nav_list > li > a {
    color: #4aa1f3 !important;
    font-weight: 500;
}

#logo {
    max-height: 42px;
    margin-right: 8px;
    display: inline-block;
    margin-top: -15px;
}

#headRow {
    background: url(images/bg.jpg) no-repeat;
    background-size: cover;
    width: 100%;
    height: 450px;
    margin-top: 0px;
    margin-left: 0px;
}

#colHeadText1 {
    color: white;
    padding-top: 30px;
    font-size: 45px;
}

#colHeadText2 {
    color: white;
    padding-top: 20px;
    padding-bottom: 30px;
    font-size: 50px;
}

ul#list_item {
    color: white;
    font-size: 35px;
    text-align: center;
}

#cityDiv {
    width: 60%;
    margin: auto;
    text-align: center;
}

input[type='text'] {
    height: 40px;
    font-size: 20px;
}

#submitCity {
    height: 40px;
    font-weight: bold;
}

#errorCity {
    width: 50%;
    margin: auto;
    text-align: center;
}

.footer {
    background-color: #4aa1f3;
    width: 100%;
    height: 80px;
    margin-top: 10px;
    bottom: 0;
}

#showWeather {
    width: 60%;
    margin: auto;
    background-color: #4aa1f3;
    color: white;
    border-radius: 25px;

}

table {
    color: #333333;
    font-family: Helvetical, Arial, sans-serif;
}

th {
    background: #4aa1f3;
    font-weight: bold;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;

}

td {
    background: #FAFAFA;
    text-align: center;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;

}

#welcome-paragraph {
    font-size: 20px;
    font-weight: normal;
    padding: 12px 25px 40px 25px;
    letter-spacing: 0.5px;
}

#rowDiv {
    margin: auto;
    width: 100%;
    font-size: 18px;
    align-items: center;
    height:50px;
    list-style: none;
    max-width: 1500x;
    margin-left: auto;
    margin-right: auto;
    padding-left: 80px;
    padding-right: 80px;
    justify-content: space-around;
}

#colDesc h3 {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 20px;
    text-transform: uppercase;
}

#colDesc {
    border: 1px solid #e7e7e7;
    margin: 0 auto;
    height: auto;
}

.info-icon {
    text-align: center;
}

.info-icon i {
    font-size: 60px;
    margin-top: 10px;
    color: #4aa1f3;
}

.typed-cursor {
    opacity: 1;
    -webkit-animation: blink 0.7s infinite;
    -moz-animation: blink 0.7s infinite;
    animation: blink 0.7s infinite;
}
@keyframes blink {
    0% { opacity:1; }
    50% { opacity:0; }
    100% { opacity:1; }
}
@-webkit-keyframes blink {
    0% { opacity:1; }
    50% { opacity:0; }
    100% { opacity:1; }
}
@-moz-keyframes blink {
    0% { opacity:1; }
    50% { opacity:0; }
    100% { opacity:1; }
}
    
.logo {
    font-family: "DM Sans", sans-serif;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 13px;
  }

  .header {
    height: 50px;
  }
  
  .navbar {
    background-color:rgba(247, 95, 95, 0.897);
    position: fixed;
    width: 100%;
  }
  
  .navbar-container {
    align-items: center;
    height:50px;
    display:flex;
    list-style: none;
    max-width: 1500px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 20px;
    padding-right: 20px;
    justify-content: space-between;
 
  }
  
  a {
    text-decoration: none; 
    color: #252525;
  }
  
  .menu li a {
  }

  .menu > li {
      margin-left: 20px;
      text-decoration: none;
    }
  
  .menu {
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
    align-items: center;
    list-style:none;
    text-decoration: none; 
  }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Weather App - Forecast</title>
    
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    
    <link rel="stylesheet" href="style.css">
    
</head>
<body>
        <header class="headers">
                <nav class="navbars">
        
                    <div class="navbar-container">
                        <div class="logo">Mike Peavy</div>
                        <ul class="menu">
                            <li><a href="#bio">Bio</a></li>
                            <li><a href="#quiz">Portfolio</a></li>
                            <li><a href="https://github.com/Mike4141" target="_blank"> Github</a></li>
                        </ul>
                    </div>
                </nav>
            </header>

</nav> 

<div class="jumbotron" style="margin-bottom:0px; background-color:#4aa1f3; color:white;">
        <h2 class="text-center" style="font-size:40px; font-weight:600;">Get Weather Forecast</h2>
    </div>
    
    <div class="container" style="height:1350px;">
        <div class="row" >
            <div class="col-md-12" style="margin-bottom:10px;">
                <h3 class="text-center text-primary">Enter City Name</h3>
                <span id="error" class="text-center"></span>
            </div>
            
            <div class="row form-group form-inline" id="cityDiv">
               
                <input type="text" name="city" id="city" class="form-control" placeholder="Enter city name" >
                <input type="text" name="days" id="days" class="form-control" placeholder="Number: Min - 1 & Max - 16" >
                <button id="submitForecast" class="btn btn-primary">Search City</button>
            </div>
    
        </div>
        
        <div class= "change">
        <div class="row" style="margin-top:30px">
            <table class="table table-bordered">
               <div id="header"  class="text-center"></div>
               
                <thead>
                    <tr>
                            <th>Icon</th>
                            <th>Weather</th>
                            <th>Description</th>
                            <th>Morning Temperature</th>
                            <th>Night Temperature</th>
                            <th>Min. Temperature</th>
                            <th>Max. Temperature</th>
                            <th>Pressure</th>
                            <th>Humidity</th>
                            <th>Wind Speed</th>
                            <th>Wind Direction</th>
                    </tr>
                </thead>
                
                <tbody id="forecastWeather">
                    
                </tbody>
                
            </table>
        </div>
        
    </div>
    </div>
    <div class="footer">
        <div class="container">
            <div class="row text-center" style="padding-top:30px;">
                <p style="color:white">Copyright &copy; Weather App</p>
            </div>
        </div>
    </div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>        
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>   
     
<script src="forecast.js"></script>   
      
</body>
</html>

我是网络开发的新手，我正在寻找有经验的人来帮助我解决我遇到的问题。我在 Udemy 上买了一门关于构建天气应用程序的类(class)。我想对其进行更改，并按照我的想法进行更改，以使其看起来更好。我怎样才能让我的结果连续显示并且在桌面上看起来仍然不错？如果我需要提供更好的描述，如果您需要更多详细信息，请告诉我。

Answer 1

这篇文章为移动 View 提供了一些简洁的表格方法: https://medium.com/appnroll-publication/5-practical-solutions-to-make-responsive-data-tables-ff031c48b122

始终尝试使用 CSS 实现“响应式”。

关于桌面，可以使用水平滚动，但不是很优雅。尝试保留适当数量的列(也许可以选择删除/添加列或通过单击元素获取更多信息)。