Цвет заголовка таблицы Bootstrap отображается только при наведении курсора на ячейку
У меня есть таблица, которую я хочу отображать с цветным заголовком, который всегда включен (а не только при наведении курсора на ячейку.
<div class = "container-fluid fieldcontain col-sm-6" >
<table class='table table-bordered table-striped table-condensed' >
<thead >
<tr>
<th class = "bg-info text-white" scope = "col">Tag</th>
<th class = "bg-info text-white" scope = "col">Value</th>
</tr>
</thead>
<tbody>
<tr>
<td scope = "row">hello</td>
<td scope = "row">william</td>
</tr>
</tbody>
</table>
</div>
Я пробовал варианты этого, включая пользовательский стиль заголовка CSS, подобный этому, но он также срабатывает только при наведении курсора на ячейку заголовка.
Пользовательские CSS
.table .thead-blue th {
background-color: cornflowerblue;
foreground-color: cornflowerblue;
}
но что бы я ни делал, когда страница отображается и ваша мышь не наведена на ячейку, она становится серой. Когда вы наводите курсор на столбец заголовка, запускается цвет.
Мне нужен этот цвет заголовка все время, а не только при наведении курсора на ячейку заголовка.
Я просмотрел примеры и т. д., Но не понимаю, почему мой цвет по умолчанию серый. Я думал, что это будет делать это все время.
Может ли кто-нибудь помочь, пожалуйста?
Убрал его обратно - нет сетки сайта Grails или чего-то еще, только две таблицы
<!DOCTYPE html>
<html>
<head>
<%--<meta name = "layout" content = "main" />--%>
<title>Bootstrap try out</title>
<link href = "//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel = "stylesheet">
<script src = "https://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<script type='text/javascript' src='//code.jquery.com/jquery-3.3.1.js'></script>
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/css/bootstrap-datepicker3.min.css">
<script type='text/javascript' src = "https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/js/bootstrap-datepicker.min.js"></script>
</head>
<body>
<div class = "row">
<%--<div class = "container-fluid col-sm-6" >--%>
<div class = "col-xs-4">
<table class='table table-bordered table-striped table-condensed ' >
<thead >
<tr>
<th class = "bg-info text-white" scope = "col">Tag</th>
<th class = "bg-info text-white" scope = "col">Value</th>
</tr>
</thead>
<tbody>
<tr>
<td scope = "row">hello</td>
<td scope = "row">william</td>
</tr>
</tbody>
</table>
</div>
</div>
<p>now table with border</p>
<div class = "row">
<div class = "col-xs-4">
<table class = "table table-bordered table-condensed">
<caption> Map table</caption> <!-- appears at bottom -->
<thead class = "alert alert-info">
<tr >
<th>tag</th>
<th>value</th>
</tr>
</thead>
<tbody>
<tr>
<td>hello</td>
<td>there</td>
</tr>
<tr>
<td>Peter</td>
<td>Parker</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
Первая таблица по умолчанию серая,
вторая таблица теперь имеет цветные заголовки.
первая таблица пытается добавить класс - нет мыла, вторая версия
Я вернул сетку сайта Grails, используя main.gsp ub, раскомментировав метатег и прокомментировав ссылки css (поскольку они одинаковы в main.gsp)
как только вы включаете сетку сайта - рендеринг перестает работать корректно
так что это похоже на то, что что-то на сайте grails std site mesh/styles и т. д. просто ломает вещи
Ответы 2
Нет. Работает. Попробуйте приведенные здесь коды. Или добавьте весь свой код.
.table .thead-blue th {
background-color: cornflowerblue;
foreground-color: cornflowerblue;
}<link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity = "sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin = "anonymous">
<div class = "container-fluid fieldcontain col-sm-6" >
<table class='table table-bordered table-striped table-condensed' >
<thead >
<tr>
<th class = "bg-info text-white" scope = "col">Tag</th>
<th class = "bg-info text-white" scope = "col">Value</th>
</tr>
</thead>
<tbody>
<tr>
<td scope = "row">hello</td>
<td scope = "row">william</td>
</tr>
</tbody>
</table>
</div>я не являюсь естественным разработчиком, поэтому я пытался использовать плагин Grails fields/сетку сайта и т. д., поскольку он так много делает, за исключением случаев, когда это не так. Одним из них является рендеринг атрибута карты, поэтому я создал входной тег и сгенерировал действие dropright для отображения таблицы тега карты и значений — отсюда и этот фрагмент. но, кажется, есть и другие проблемы в местах.
Если вы хотите запустить его, вы можете клонировать проект и построить его. Я настроил контроллер с моей «тестовой страницей» на локальном хосте: 8080/maintenanceAgreement/ldt/1, который является отдельной «взломной страницей» для просмотра рендеринга, но запускает views/layouts/main.gsp для отображения заголовка. /нижний колонтитул
где я могу увидеть html?
Привет - я обновил скриншоты в PS на оригинальном посте. Я сделал обычную страницу без граалей - две таблицы сначала не меняют цвета заголовков, а вторая - меняет. Затем я перенаправляю страницу через сетку сайта Grails, и она полностью нарушает цвета.
если вы посмотрите на последнюю урезанную страницу здесь github.com/woodmawa/LCM-network-app/blob/master/grails-app/…
это обычная страница с отключенной сеткой сайта. первая таблица не меняет цвет для заголовка. вторая версия (как показано на скриншоте выше сейчас). Как только задействуется сетка сайта grails - все останавливается как на секундной диаграмме
ооочень расстраивает. я продолжу экспериментировать и посмотрю, какая часть main.gsp останавливает его работу? пока я делаю это в простой первой таблице html, почему заголовок не меняет цвет?
только что добавил третью таблицу, но объявил thead следующим образом ' <thead class = "thead-blue">' и пользовательский css, подобный этому ' .thead thead-blue thead { background-color: cornflowerblue; цвет переднего плана: васильковый; }
я не понимаю :/
вы видите обычную HTML-страницу по адресу github.com/woodmawa/LCM-network-app/blob/master/grails-app/…?
если это так, вырежьте и вставьте в свое локальное место при рендеринге страницы - вы должны увидеть две таблицы - первая с серыми заголовками - вторая теперь с цветными заголовками
ps только что снова сохранил в git с третьей таблицей, где я пытался сделать собственный стиль для заголовков - это тоже не работает.
Я внес свой вклад в проект. Вы можете посмотреть?
Давайте продолжить обсуждение в чате.
Я пробовал метод грубой силы как на CSS, так и на Jscript и покрывал/раскрывал каждый, пока что-то не сломало Bootstrap. Оказывается, это файл main.css Grails. Затем я просмотрел разделы CSS и прибил его к этому
th {
background-color: #efefef;
background-image: -moz-linear-gradient(top, #ffffff, #eaeaea);
/*background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ffffff), color-stop(1, #eaeaea));*/
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr = '#ffffff', EndColorStr = '#eaeaea');
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffffff', EndColorStr='#eaeaea')";
color: #666666;
font-weight: bold;
line-height: 1.7em;
padding: 0.2em 0.6em;
}
Затем я просмотрел каждую строку по очереди, чтобы проверить, что работает, а что нет — и все сводится к одной строке CSS!
Оскорбительная линия
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ffffff), color-stop(1, #eaeaea));
Если вы прокомментируете это (я не знаю, что это такое или делает), внезапно ваш Bootstrap начинает вести себя так, как на отдельной странице.
Так что у меня все еще есть некоторые проблемы с раскрашиванием заголовков таблиц в Bootstrap, но это может подождать.
Для всех, кто хочет увидеть последнюю позицию на Github:
Последние изменения:
1) скопировал main.gsp в lcm-main и отредактировал его, чтобы я мог отслеживать, что я меняю в layout.gsp 2) изменил метатег страницы контроллера, чтобы использовать шаблон lcm-main 3) не был уверен, что происходит на одном этапе с Bootstrap, поэтому я установил последнюю версию CSS, таблицы стилей в активы и изменил application.js и application.css, чтобы получить последнюю версию Bootstrap 4.2.1.
Таблицы теперь отображаются так, как я и ожидал, а заголовки можно раскрасить.
Итак, lcm-main.gsp выглядит так
<!doctype html>
<html >
<head>
<meta http-equiv = "Content-Type" content = "text/html; charset=UTF-8"/>
<meta http-equiv = "X-UA-Compatible" content = "IE=edge"/>
<title>
<g:layoutTitle default = "LCM Inventory"/>
</title>
<meta name = "viewport" content = "width=device-width, initial-scale=1"/>
<asset:stylesheet src = "lcm-application.css"/>
<%--<g:external file = "lcm-app.css" />--%> <%--this works and knows default place for stylesheets --%>
<!--<link href = "//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel = "stylesheet">-->
<%--<script src = "https://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>--%>
<link rel = "stylesheet" href = "https://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css">
<script type = "text/javascript" src = "https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment-with-locales.min.js"></script>
<script type = "text/javascript" src = "https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.0.0-alpha14/js/tempusdominus-bootstrap-4.min.js"></script>
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.0.0-alpha14/css/tempusdominus-bootstrap-4.min.css" />
<%--<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/css/bootstrap-datepicker3.min.css">
<script type='text/javascript' src = "https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/js/bootstrap-datepicker.min.js"></script>
--%>
<g:layoutHead/>
<%-- header assets --%>
</head>
<body>
<nav class = "navbar navbar-expand-lg navbar-dark navbar-static-top" role = "navigation">
<a class = "navbar-brand" href = "/#"><asset:image src = "inventoryDisksImage.png" width = "7%" height = "6%" alt = "LCM Logo" /></a>
<button class = "navbar-toggler" type = "button" data-toggle = "collapse" data-target = "#navbarContent" aria-controls = "navbarContent" aria-expanded = "false" aria-label = "Toggle navigation">
<span class = "navbar-toggler-icon"></span>
</button>
<div class = "collapse navbar-collapse" aria-expanded = "false" style = "height: 0.8px;" id = "navbarContent">
<ul class = "nav navbar-nav ml-auto">
<g:pageProperty name = "page.nav"/>
</ul>
</div>
</nav>
<g:layoutBody />
<div class = "footer row" role = "contentinfo" class = "container-fluid">
<p>LCM Footer version x.y</p>
</div>
<div id = "spinner" class = "spinner" style = "display:none;">
<g:message code = "spinner.alt" default = "Loading…"/>
</div>
<asset:javascript src = "application.js"/>
</body>
</html>
Теперь моя страница контроллера и отдельная страница (без сетки сайта), похоже, ведут себя одинаково.
Пересмотренный application.js теперь выглядит так
// This is a manifest file that'll be compiled into application.js.
//
// Any JavaScript file within this directory can be referenced here using a relative path.
//
// You're free to add application-wide JavaScript to this file, but it's generally better
// to create separate JavaScript files as needed.
//= require popper.min
//= require bootstrap.4.2.1/bootstrap
//= require jquery-3.3.1.min
//= require LCM-app
//= require_self
и application.css выглядит так
/*
* This is a manifest file that'll be compiled into application.css, which will include all the files
* listed below.
*
* Any CSS file within this directory can be referenced here using a relative path.
*
* You're free to add application-wide styles to this file and they'll appear at the top of the
* compiled file, but it's generally better to create a new file per style scope.
*
*= require bootstrap.4.2.1
*= require grails
*= require main
*= require mobile
*= require lcm-app
*= require_self
*/
Итак, наконец, я собираюсь поднять ошибку и посмотреть, смогу ли я спасти кого-нибудь из 4 дней боли, чтобы зайти так далеко.
Хорошо, так странно - я делаю это в приложении Grails v3, и у меня есть ужасное подозрение, что сзади происходит какая-то странная чепуха, которая мешает работе, как ожидалось. проект git hub находится здесь github.com/woodmawa/LCM-сетевое-приложение