css - 引导表标题颜色仅在单元格悬停时显示
问题描述
我有一个表格，我想用始终打开的彩色标题呈现（不仅仅是当你将鼠标悬停在单元格上时。
<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 站点网格/样式等中的某些东西只会让事情中断
解决方案
我在 CSS 和 Jscript 上尝试了一种蛮力方法，并覆盖/发现了每一个，直到有东西破坏了 Bootstrap。结果是在 Grails 的 main.css 中。然后我浏览了 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 天的痛苦来做到这一点。
推荐阅读
- spring - Javax 验证不适用于引导休息控制器参数
- php - constraint() 和 reference() / Laravel 6 之间的区别
- python - Pyhon 检查列表中的所有项目是否都可以是数字
- julia - 用返回多个值的函数的矢量化调用替换 for 循环
- reactjs - setState 不会重新渲染反应功能组件
- c++ - 读取未知字符类型的文件
- python - 即使看起来正确也无法创建表面
- javascript - 我想打印从 0 到 1000 的“i”值
- ruby - logstash 配置循环遍历字段
- html - 为什么我在表格单元格中得到 NaN？（Python - 熊猫）