Я продолжаю получать пустые строки между моим столом - PullRequest
Новая
       0

Я продолжаю получать пустые строки между моим столом

0 голосов
/ 08 апреля 2020

Как только таблица начинает заполняться, она продолжает давать мне эти пустые строки на столе.

Я использую шаблон w3schools, но я не думаю, что это является причиной проблемы. Я поместил изображение ниже примера того, как это будет выглядеть, когда таблица заполнится.

Я пробовал разные вещи с CSS, но ничего не получалось, и я не могу найти ни одного поста с похожими проблемами, пожалуйста, помогите. 

<!DOCTYPE html>
<html>
<title>CaBar</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Inconsolata">

<head>
  <style>
    body,
    html {
      height: 100%;
      font-family: "Inconsolata", sans-serif;
    }
    
    .bgimg {
      background-position: center;
      background-size: cover;
      background-image: url("images/coffee1.jpg");
      min-height: 75%;
    }
    
    .menu {
      display: none;
    }
  </style>


  <style>
    table {
      border-collapse: collapse;
    }
    
    table,
    th,
    td {
      border: 1px solid black;
      height: 50px;
      position: relative;
      top: 40px;
    }
  </style>
</head>

<body>


  <div class="w3-top">
    <div class="w3-row w3-padding w3-black">
      <div class="w3-col s3">
        <a href="inventory.php" class="w3-button w3-block w3-black">INVENTORY</a>
      </div>
      <div class="w3-col s3">
        <a href="giftcards.php" class="w3-button w3-block w3-black">PROFITS</a>
      </div>
      <div class="w3-col s3">
        <a href="about.html" class="w3-button w3-block w3-black">ORDER</a>
      </div>
      <div class="w3-col s3">
        <a href="home.html" class="w3-button w3-block w3-black">LOGOUT</a>
      </div>
    </div>
  </div>




  <table align='center'>
    <tr>
      <th>ID</th>
      <th>NAME</th>
      <th>STOCK</th>
      <th>COST</th>
      <th>PRICE</th>
    </tr>
</body>

</html>

1 Ответ

0 голосов
/ 08 апреля 2020

Попробуйте удалить top: 40px; из вашего css ...

Я также добавил margin-top к таблице, поскольку она скрыта за навигацией, которая использует position:fixed

фрагмент ниже: 

body,
html {
  height: 100%;
  font-family: "Inconsolata", sans-serif;
}

.bgimg {
  background-position: center;
  background-size: cover;
  background-image: url("images/coffee1.jpg");
  min-height: 75%;
}

.menu {
  display: none;
}

table {
  margin-top: 70px;
  border-collapse: collapse;
}

table,
th,
td {
  border: 1px solid black;
  height: 50px;
  position: relative;
  /* top: 40px; */
}
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Inconsolata">

<body>
  <div class="w3-top">
    <div class="w3-row w3-padding w3-black">
      <div class="w3-col s3">
        <a href="inventory.php" class="w3-button w3-block w3-black">INVENTORY</a>
      </div>
      <div class="w3-col s3">
        <a href="giftcards.php" class="w3-button w3-block w3-black">PROFITS</a>
      </div>
      <div class="w3-col s3">
        <a href="about.html" class="w3-button w3-block w3-black">ORDER</a>
      </div>
      <div class="w3-col s3">
        <a href="home.html" class="w3-button w3-block w3-black">LOGOUT</a>
      </div>
    </div>
  </div>
  <table align='center'>
    <thead>
      <tr>
        <th>ID</th>
        <th>NAME</th>
        <th>STOCK</th>
        <th>COST</th>
        <th>PRICE</th>
      </tr>
    </thead>

    <tbody>
      <tr>
        <td>mock ID</td>
        <td>mock NAME</td>
        <td>mock STOCK</td>
        <td>mock COST</td>
        <td>mock PRICE</td>
      </tr>
      <tr>
        <td>mock ID</td>
        <td>mock NAME</td>
        <td>mock STOCK</td>
        <td>mock COST</td>
        <td>mock PRICE</td>
      </tr>
      <tr>
        <td>mock ID</td>
        <td>mock NAME</td>
        <td>mock STOCK</td>
        <td>mock COST</td>
        <td>mock PRICE</td>
      </tr>
      <tr>
        <td>mock ID</td>
        <td>mock NAME</td>
        <td>mock STOCK</td>
        <td>mock COST</td>
        <td>mock PRICE</td>
      </tr>
    </tbody>
  </table>
</body>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...