Question

从总体上看这是一张漂亮的桌子，但仅在PC /笔记本电脑上。切换到具有移动设备/ ipad外观的分辨率后，它看起来就很糟糕。

body {
    background-color: #1b345e;
    font-family: 'Roboto', sans-serif;
}
#head {
  padding-top: 20px;
  text-align:center;
}
h2 {
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
    background-color: #1b345e;
    color: white;
}
.topnav {
    position: relative;
    background-color: #333;
    overflow: hidden;
  }
#checkboxes {
  margin-left: 42%;
  display: inline;
}
td {
  text-align: center;
  color: white;
}
th {
  color: white;
}
input[type="checkbox"] {
  width: 30px;
  height: 30px;
}
table {
  margin-left: 36%;
}
hr {
  width: 50%;
}
  /* Style the links inside the navigation bar */
  .topnav a {
    float: left;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
  }

  /* Change the color of links on hover */
  .topnav a:hover {
    background-color: #ddd;
    color: black;
  }

  /* Add a color to the active/current link */
  .topnav a.active {
    background-color: #4CAF50;
    color: white;
  }
label {
  font-size: 13px;
  color: lightblue;
}
  /* Centered section inside the top navigation */
  .topnav-centered a {
    float: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  /* Right-aligned section inside the top navigation */
  .topnav-right {
    float: right;
  }

input[type="submit"] {
  background-color: #4CAF50; /* Green */
  border: none;
  color: white;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin-top: 50px;
  height: 30px;
  margin-left: 40%;
  width: 20%;
  text-align: center;
}

<!DOCTYPE html>
<html>
<head>
    <link href="https://fonts.googleapis.com/css?family=Roboto:300" rel="stylesheet">
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Piarista Kollégium - Stúdiumi jelentkezés</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
    <script src="main.js"></script>
</head>
<body>
<div class="topnav">

<div class="topnav-centered">
  <a href="#home" class="active">Jelentkezés</a>
</div>

<a href="#news">Frissítések</a>

<div class="topnav-right">
  <a href="#search">Bejelentkezés</a>
</div>
</div>
<div id="head">
    <img src="logo.png">
</div>
<h2>Üdvözöllek, XY!</h2>
</div>


<form action="index.php">
    <table>
      <thead>
          <tr>
            <th></th>
              <th>1.</th>
              <th>2.</th>
              <th>3.</th>
              <th>4.</th>
              <th>5.</th>
              <th>6.</th>
          </tr>
        </thead>

        <tbody>
            <tr>
              <th>Hétfő</th>
                <td><label><input type="checkbox" name="checkbox" value="8">8</label></td>
                <td><label><input type="checkbox" name="checkbox" value="8">8</label></td>
                <td><label><input type="checkbox" name="checkbox" value="8">8</label></td>
                <td><label><input type="checkbox" name="checkbox" value="8">8</label></td>
                <td><label><input type="checkbox" name="checkbox" value="8">8</label></td>
                <td><label><input type="checkbox" name="checkbox" value="8">8</label></td>
            </tr>
            <tr>
              <th>Kedd</th>
              <td><label><input type="checkbox" name="checkbox" value="8">8</label></td>
              <td><label><input type="checkbox" name="checkbox" value="8">8</label></td>
              <td><label><input type="checkbox" name="checkbox" value="8">8</label></td>
              <td><label><input type="checkbox" name="checkbox" value="8">8</label></td>
              <td><label><input type="checkbox" name="checkbox" value="8">8</label></td>
              <td><label><input type="checkbox" name="checkbox" value="8">8</label></td>
            </tr>
            <tr>
              <th>Szerda</th>
              <td><label><input type="checkbox" name="checkbox" value="8">8</label></td>
              <td><label><input type="checkbox" name="checkbox" value="8">8</label></td>
              <td><label><input type="checkbox" name="checkbox" value="8">8</label></td>
              <td><label><input type="checkbox" name="checkbox" value="8">8</label></td>
              <td><label><input type="checkbox" name="checkbox" value="8">8</label></td>
              <td><label><input type="checkbox" name="checkbox" value="8">8</label></td>
            <tr>
              <hr>
              <th>Csütörtök</th>
              <td><label><input type="checkbox" name="checkbox" value="8">8</label></td>
              <td><label><input type="checkbox" name="checkbox" value="8">8</label></td>
              <td><label><input type="checkbox" name="checkbox" value="8">8</label></td>
              <td><label><input type="checkbox" name="checkbox" value="8">8</label></td>
              <td><label><input type="checkbox" name="checkbox" value="8">8</label></td>
              <td><label><input type="checkbox" name="checkbox" value="8">8</label></td>
            </tr>
            <tr>

            </tr>
        </tbody>
    </table>
    <input type="submit" value="Jelentkezés elküldése">
</form>
</body>
</html>

有任何使之响应的想法吗？如果只是切换到较小的尺寸，那甚至可以。我尝试了最大和最小宽度，但没有获得任何成功。

Answer 1

您可以将表格元素的margin属性设置为0 auto：

df.groupby(["Brand", "Model"]).size().reset_index(name="Count").sort_values(by="Count", ascending=False).drop_duplicates("Brand", keep="first")

如何使该表具有响应性？

1 个答案: