gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 00:27:09 25 4
gpt4 key购买 nike

我有一个表格,我想使用始终打开的彩色标题呈现(不仅仅是当您将鼠标悬停在单元格上时。

    <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;
}

但无论我做什么,当页面呈现并且您的鼠标没有悬停在单元格上时,该单元格是灰色的。当您将鼠标悬停在标题栏上时,会触发颜色。

我一直想要标题颜色 - 而不仅仅是当我将鼠标悬停在标题单元格上时。

我查看了示例等 - 但不明白为什么我的默认设置是灰色的。我以为它会一直这样做。

有人可以帮忙吗?

enter image description here

直接剥离它 - 没有 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>

第一个表格默认为灰色,

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

enter image description here

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

我将 grails 站点网格重新使用 main.gsp ub 取消注释元标记,并注释掉 css 链接(因为它们在 main.gsp 中是相同的)

一旦启用站点网格 - 渲染将停止正常工作

enter image description here

所以它看起来像 grails 站点 std 站点 mesh/styles 等中的某些东西只会让事情崩溃

最佳答案

没有。它的工作。试试这里的代码。或者,添加您的所有代码。

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

关于css - Bootstrap 表格标题颜色仅在单元格悬停时显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54592622/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com