Question

我使用了一个所谓的“响应式”预制模板，但是它对我而言仍然没有显示响应式。有没有人可以帮助我做出回应？以下是一些屏幕截图：

这是我使用的代码：

<table class="table table-striped table-bordered table-hover" align="center">
                  <th> </th>
                  <th> </th>
                  <th>
                        <div class="search-container">
                            <form method="post" action="admin.php?p=members">
                                <input type="text" placeholder="Search.." name="search">
                                <button type="submit"><i class="fa fa-search"></i></button>
                            </form>
                        </div>
                  </th>
                  
                <thead>
                    <tr>
                        <th>#</th>
                        <th>Name</th>
                        <th>Action</th>
                    </tr>
                </thead>
                <tbody>
                <?php
                       echo "<tr>";        
                       echo "<td>". $row['ID'] . "</td>";
                       echo "<td width='70%' align='right'>". $row['USERNAME'] . "</td>";
                       echo "<td><p align='right'><a href='admin.php?p=members&id=". $row['ID'] . "'><button class='btn btn-info'>View user</button></a></p>";
                       echo "</tr>";
                 } 
                echo "</table>";

我已经删除了大多数php代码，以使其更具可读性。

以及CSS代码：

* {box-sizing: border-box;}

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

.topnav {
  overflow: hidden;
  background-color: #e9e9e9;
}

.topnav a {
  float: left;
  display: block;
  color: black;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.topnav a:hover {
  background-color: #ddd;
  color: black;
}

.topnav a.active {
  background-color: #2196F3;
  color: white;
}

.topnav .search-container {
  float: right;
}

.topnav input[type=text] {
  padding: 6px;
  margin-top: 8px;
  font-size: 17px;
  border: none;
}

.topnav .search-container button {
  float: right;
  padding: 6px 10px;
  margin-top: 8px;
  margin-right: 16px;
  background: #ddd;
  font-size: 17px;
  border: none;
  cursor: pointer;
}

.topnav .search-container button:hover {
  background: #ccc;
}

@media screen and (max-width: 600px) {
  .topnav .search-container {
    float: none;
  }
  .topnav a, .topnav input[type=text], .topnav .search-container button {
    float: none;
    display: block;
    text-align: left;
    width: 100%;
    margin: 0;
    padding: 14px;
  }
  .topnav input[type=text] {
    border: 1px solid #ccc;  
  }
}

body {font-family: Arial, Helvetica, sans-serif;}
* {box-sizing: border-box;}

和一些屏幕截图：

如果有人可以帮助我响应此表，将不胜感激。

Answer 1

您没有关闭最后一个<td>和<tbody>。我为该表添加了width: 100%，并认为它现在可以响应了。

table {
  width: 100%;
}

<table class="table table-striped table-bordered table-hover" align="center">
  <th> </th>
  <th> </th>
  <th>
    <div class="search-container">
      <form method="post" action="admin.php?p=members">
        <input type="text" placeholder="Search.." name="search">
        <button type="submit"><i class="fa fa-search"></i></button>
      </form>
    </div>
  </th>
  <thead>
    <tr>
      <th>#</th>
      <th>Name</th>
      <th>Action</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td width='70%' align='right'>John</td>
      <td>
        <p align='right'><a href='#'><button class='btn btn-info'>View user</button></a></p>
      </td>
    </tr>
  </tbody>
</table>

我曾尝试制作一个响应式表格，但是它不起作用，如何解决这个问题？

1 个答案: