Question

我有一个要渲染的表，该表始终带有彩色标题（不仅是当您将鼠标悬停在单元格上时。

    <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头部样式，但是也只有当我将鼠标悬停在标头单元格上时才会触发。

custom.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>

第一个表格默认为灰色

第二个表现在具有彩色标题。

第一个表尝试将类添加到-没有肥皂，第二个版本

我使用main.gsp ub将grails站点网格重新加入，取消了meta标签的注释，并注释掉了CSS链接（因为它们在main.gsp中是相同的）

启用站点网格后，渲染将停止正常工作

所以看起来grails网站std网站网格/样式等中的东西只会使事情中断

Answer 1

不。工作正常尝试此处的代码。或者，添加您的所有代码。

   .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>

Answer 2

我在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上最新职位的任何人：

project

最新更改：

1）将main.gsp复制到lcm-main并进行了编辑，以便可以跟踪我在layout.gsp中所做的更改 2）更改控制器页面的meta标签以使用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&hellip;"/>
</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天的痛苦来解决这个问题。

Bootstrap表标题颜色仅在单元格悬停时显示

2 个答案: