Класс отображения Bootstrap, влияющий на заголовок таблицы

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

Никак не могу избавиться от этой проблемы. Я использую стандартный бутстрап 4 CSS.

Мой код для таблицы выглядит так, спасибо за помощь.

<div class='container mx-auto' style='width: 100%'>
    <table class='table table-hover' style='width: 100%'>
        <thead class='bg-primary text-white'>  
            <tr>
                <th class='bg-primary text-white border-left border-right d-none d-xl-block'>ID</th>
                <th class='col-2 bg-primary text-white border-left border-right'>Date</a></th>
                <th class='bg-primary text-white d-none d-lg-block'>Venue</th>
                <th class='bg-primary text-white'>Comp</th>
                <th class='bg-primary text-white border-left border-right d-none d-lg-block'>M/F</th>
                <th class='col-2 bg-primary text-white border-left border-right'>Home Team</th>
                <th colspan='2' class='col-1 bg-primary text-white border-left border-right text-center'>Score</th>
                <th class='col-2 bg-primary text-white border-left border-right'>Away Team</th>
                <th class='bg-primary text-white border-left border-right d-none d-md-block'>Referee</th>
                <th class='bg-primary text-white border-left border-right text-center'>Edit</th>
                <th class='bg-primary text-white border-left border-right text-center'>Delete</th>
            </tr>
        </thead>
        <tbody>
<?php
  if ($result = mysqli_query($link,$sql)) {
      while ($row = mysqli_fetch_array($result)) {
          echo "
                      <tr>
                          <td class='border-left border-right d-none d-xl-block'>{$row[6]}</td> <!-- ID -->
                          <td class='border-left border-right'><a href='viewMatch.php?matchID = {$row[6]}'>{$row[0]}</a></td><!-- Date -->
                          <td class='text-left border-left border-right d-none d-lg-block'>{$row[1]}</td><!-- Venue -->
                          <td class='border-left border-right'>{$row[2]}</td><!-- Comp -->
                          <td class='border-left border-right d-none d-lg-block' style='text-align:center'>{$row[7]}</td><!-- Gender -->
                          <td class='border-left border-right'>{$row[3]}</td><!-- Home Team -->
                          <td class='border-left border-right' style='text-align:center'>{$row[8]}</td><!-- Home Score -->
                          <td class='border-left border-right' style='text-align:center'>{$row[9]}</td><!-- Away Score -->
                          <td class='border-left border-right'>{$row[4]}</td><!-- Away Team -->
                          <td class='border-left border-right d-none d-md-block'>{$row[5]}</td><!-- Referee -->";
          if ($role >= 5) {
              echo "
                          <td class='border-left border-right text-center'>
                              <form action='../edit/updateMatch.php' method='POST' onsubmit=''/>
                                  <input type='hidden' name='q' value='".$row[6]."'/><button class='btn btn-primary' type='Submit' value='Update'><i class='fa fa-edit'></i></button>
                              </form>
                          </td>";
          }
          if ($role > 5) {
              echo "
                          <td style='text-align:center'>
                              <form action='../delete/deleteMatch.php' method='POST' onsubmit='' onclick='return confirm(`do you want to delete {$row[3]} vs {$row[4]} on the {$row[0]}`)'/><input type='hidden' name='q' value='".$row[6]."' /><button class='btn btn-danger' type='Submit' value='Delete'><i class='fa fa-trash'></i></button>
                              </form>
                          </td>";
          }
          echo "
                      </tr>";
      }    
      echo "
                  </tbody>
              </table>
          </div>
  </div>";

Каков ваш желаемый результат?

Mohamed Mufeed 20.12.2020 05:42
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
CSS: FlexBox
CSS: FlexBox
Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.
1
1
552
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

проблема с суффиксом -block в классах. Вместо этого вы должны использовать -table-cell.

Подробнее см. в документации

<!DOCTYPE html>
<html lang = "en">
<head>
  <meta charset = "UTF-8">
  <meta name = "viewport" content = "width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity = "sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin = "anonymous">
  <script src = "https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity = "sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin = "anonymous"></script>
  <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity = "sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin = "anonymous"></script>
  <script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity = "sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin = "anonymous"></script>
</head>
<body>
<div class='container mx-auto' style='width: 100%'>
    <table class='table table-hover' style='width: 100%'>
        <thead class='bg-primary text-white'>  
            <tr>
                <th class='bg-primary text-white border-left border-right d-none d-xl-table-cell'>ID</th>
                <th class='col-2 bg-primary text-white border-left border-right'>Date</a></th>
                <th class='bg-primary text-white d-none d-lg-table-cell'>Venue</th>
                <th class='bg-primary text-white'>Comp</th>
                <th class='bg-primary text-white border-left border-right d-none d-lg-table-cell'>M/F</th>
                <th class='col-2 bg-primary text-white border-left border-right'>Home Team</th>
                <th colspan='2' class='col-1 bg-primary text-white border-left border-right text-center'>Score</th>
                <th class='col-2 bg-primary text-white border-left border-right'>Away Team</th>
                <th class='bg-primary text-white border-left border-right d-none d-md-table-cell'>Referee</th>
                <th class='bg-primary text-white border-left border-right text-center'>Edit</th>
                <th class='bg-primary text-white border-left border-right text-center'>Delete</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
</div>
</body>
</html>

Другие вопросы по теме