如何在yii2 GridView中为每个TH和TD添加css类
在Yii2 GridView中为每个TH和TD添加CSS类，可以通过以下步骤实现：
- 创建一个GridView的实例，并设置dataProvider和columns属性，例如：
<?= GridView::widget([
'dataProvider' => $dataProvider,
'columns' => [
'id',
'name',
'email',
// ...
],
]) ?>- 在columns属性中，为每个列定义一个数组，并在该数组中使用headerOptions和contentOptions属性来添加CSS类。headerOptions用于TH元素，contentOptions用于TD元素。例如：
<?= GridView::widget([
'dataProvider' => $dataProvider,
'columns' => [
[
'attribute' => 'id',
'headerOptions' => ['class' => 'my-header-class'],
'contentOptions' => ['class' => 'my-td-class'],
],
[
'attribute' => 'name',
'headerOptions' => ['class' => 'my-header-class'],
'contentOptions' => ['class' => 'my-td-class'],
],
[
'attribute' => 'email',
'headerOptions' => ['class' => 'my-header-class'],
'contentOptions' => ['class' => 'my-td-class'],
],
// ...
],
]) ?>- 在上述代码中，'my-header-class'和'my-td-class'是自定义的CSS类名，你可以根据需要修改为你想要的类名。
- 保存并刷新页面，你会发现每个TH和TD元素都会应用相应的CSS类。
注意：以上代码示例中使用了Yii2的GridView组件，如果你还没有安装Yii2框架，你需要先安装Yii2框架并配置好相关环境才能使用GridView组件。关于Yii2的安装和配置，请参考Yii2官方文档。
推荐的腾讯云相关产品：腾讯云服务器（CVM）和腾讯云数据库（TencentDB）。你可以通过以下链接了解更多关于腾讯云服务器和腾讯云数据库的信息：
- 腾讯云服务器（CVM）：https://cloud.tencent.com/product/cvm
- 腾讯云数据库（TencentDB）：https://cloud.tencent.com/product/cdb
相关·内容
我想用css在我的网格视图标题中设置锚链接的样式。我的类th的样式可以工作，但是th a的样式不适用于它。它被包含的div a样式覆盖。此外，如果我在没有前面的类的情况下执行th a或th a:hover，它不会影响我的th中的超链接。我已经在IE和Firefox中测试过了。这是我的css的网格视图部分：
.gridview
{
border-color: #9BBE00;
border-width: thin;
border-style: solid;
width: 700px;
}
.gridview th
{
b
浏览 0提问于2011-03-15得票数 2
回答已采纳
我如何勾选代码6000，它会自动选中7000之间的复选框？如果选中7000，则也会显示为介于7000和7004之间
$('.mGrid tr').each(function () {
if (!this.rowIndex) return;
if ($(this).find("td:eq(2)").text() =='S') {
$(this).css({
'font-weight': '800',
'backg
浏览 0提问于2013-03-22得票数 0
我尝试在yii2网格视图中使用GridView:widget()中的列索引来显示数据。我在数据库中有大量的字段(约40)，需要显示所有它们，并希望添加相同的css类名作为字段名到每个TH和TD。我知道我可以使用下面的代码来实现这一点，但我必须编写很多代码：
'columns' => [
[
'attribute' => 'ID',
'contentOptions' => ['class' => 'ID'],
浏览 4提问于2017-02-22得票数 2
回答已采纳
1回答
有人能帮我实现一个Gridview (Yii2)，其中第一列(名称)总是可见的，而其他我可以水平滚动到一边。
我的客户要求一个类似Excel的界面，他们可以查看和过滤各种客户信息(各种产品标明是或否)。
首先，我以这个例子作为参考：
REF 1来自引导程序
.scrolling table {
table-layout: inherit;
*margin-left: -100px;
/*ie7*/
}
.scrolling td,
th {
vertical-align: top;
padding: 10px;
min-width: 100px;
}
.scro
浏览 1提问于2019-07-30得票数 2
回答已采纳
我有一个现有的CSS文件，其中包含以下两个id选择器：
#TableHead {
font-family: Arial, Helvetica, sans-serif;
font-size:11px;
font-weight: bold;
color: #000000;
border-top-width: thin;
border-top-style: solid;
border-top-color: #A9AAAA;
border-bottom-width: thin;
border-bottom-style: solid;
border-bottom-color: #A9AAAA;
}
#
浏览 7提问于2011-07-05得票数 0
回答已采纳
我想使用CSS来格式化我的GridView行。
我在aspx中设置了GridView，如下所示：
<asp:GridView ID="GridView1" runat="server">
</asp:GridView>
通过调用从数据访问层获取数据集的方法，我在代码隐藏中设置并绑定了数据源。
但是，因为我以编程方式设置数据源，所以行和单元格没有id属性。
如何使用CSS设置这些行和单元格的样式和格式？
这是当前生成的HTML：
<div>
<table cellspacing="0" rules=
浏览 3提问于2012-06-26得票数 0
回答已采纳
2回答
我试图将THEAD类设置为GridView，并且我已经接近于拥有一个没有Thead属性的Thead元素，并且拥有我想要的tr元素的类名。原因是PDF生成器将在每个页面上查找头类名称并生成表头。PDF生成器有时在呈现javascript方面有问题，所以我更喜欢页面上的纯html和css。
除了databind.之外，后面还有代码
GridView1.HeaderRow.TableSection = TableRowSection.TableHeader
Aspx
<asp:GridView ID="GridView1" runat="server" Auto
浏览 4提问于2013-09-05得票数 2
( a)据我所知，GridView’s RowStyle-HorizontalAlign属性应该覆盖CSS的text-align属性，因此GridView的单元格中的文本应该位于单元格的左侧，而是移到右侧。为什么会这样呢？
( b)类似地，RowStyle-Font-Bold应该覆盖CSS的font-weight属性，因此字体不应该是粗体。但同样，CSS的属性覆盖RowStyle’s Font-Bold属性。为什么？
<div id="someClass">
<asp:GridView ID="gvwShowUser
浏览 9提问于2010-03-19得票数 1
1回答
我是Yii2的新手，没有尝试在视图中显示数据。我以前这样做过(使用GridView)：
GridView::widget([
'dataProvider' => $dataProvider,
'filterModel' => $searchModel,
'columns' => [
['class' => 'yii\grid\SerialColumn'],
[
'attribute' =&
浏览 6提问于2018-01-17得票数 0
回答已采纳
即使我为"GridViewHeader“设置了一个不同的类，它也应用了这些样式，但它也应用了"GridView”类中的样式，但我只想要"GridViewHeader“样式。有办法这样做吗？
基本上，每个表行上都有一个黄色的突出显示，但是当我悬停在标题行上时，我不想看到那个黄色的突出显示。
HTML示例：
<table class="GridView" cellspacing="0" rules="all" border="1" id="MainContent_GridView1" st
浏览 9提问于2014-11-05得票数 0
回答已采纳
4回答
我在使用来自ASP.NET应用程序的ASP.NET时遇到了问题。当我将table table-striped css类用于我的asp:GridView控件时，将表的 Header 视为Row<code>E 210</code>。
我的GridView
ASP.NET MarkUp
<asp:GridView ID="dgvUsers" runat="server"
CssClass="table table-hover table-striped" GridLines="None"
浏览 2提问于2012-09-11得票数 41
回答已采纳
1回答
我被几天后的一个问题弄糊涂了，我解决不了。我有一个表单，它有不同的类，当用户单击add按钮时，我想生成两个字段。我可以生成字段，但是我无法通过那些动态生成的字段传递特定的class_id。我正在使用，下面是生成动态字段的方法。
只有涉及的模型才是Registration形式。除此之外，我只是启动查询，并显示data.One类可以有多个Registrations
Class Registration
is id
name class_id
firstname
lastname
这是我的视图代码
<?php
浏览 1提问于2015-12-03得票数 2
回答已采纳
7回答
我有一个带有以下CSS格式的表格：
<table cellspacing="2">
<tbody>
<tr>
<th>Name</th>
<th>Area</th>
</tr>
<tr>
<td>${it.conferenc
浏览 2提问于2011-05-27得票数 3
回答已采纳
全,
我有一个ASP.NET GridView，它被呈现到一个HTML表中。
<table>
<tr><th>Col 1 Head</th><th>Col 2 Head</th></tr>
<tr><td>Data 1</td><td>Data 2</td></tr>
<tr><td>Data 3</td><td>Data 4</td></tr>
浏览 1提问于2012-08-09得票数 36
回答已采纳
1回答
我想在视图中的表中显示数据，数据是由dataProvider提供的，但我不想使用Yii GridView，因为表很难看，我想使用我选择的表并在其中显示这些数据，我尝试使用foreach循环遍历dataprovider提供的数据，因为它是一个数组，但我得到了一个错误消息(获取未知属性: yii\db\ActiveQuery::product_id)，下面是我的代码
Controller code
public function actionIndex()
{
$searchModel = new ProductSearch();
$dataProvider = $searchM
浏览 1提问于2016-03-25得票数 1
3回答
如何在laravel表格中应用替代行颜色CSS。我想要显示表格行的替代颜色。我已经把gridview cssclass放在表中了。我想对偶数行计数应用.gridview tr.even td，即具有2的倍数的行。
我的CSS文件
.gridview {
font-family: "arial";
background-color: #FFFFFF;
width: 100%;
font-size: small;
}
.gridview th {
background: #0CA3D2;
padding: 5
浏览 32提问于2018-07-30得票数 1
回答已采纳
2回答
如何在wordpress中的多个页面上使用相同的自定义css代码我现在正在wordpress中的此页面上使用此自定义css id 1367，我也想在此页面上使用这些相同的css id 1699。 .page-id-1367 table, th, td {
border: 1px solid black !important;
} 我是否需要像这样添加，或者在wordpress中提供任何其他可用的方法 .page-id-1699 table, th, td {
border: 1px solid black !important;
}
浏览 38提问于2021-02-26得票数 2
回答已采纳
我有下面的html
JS小提琴：
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type='text/javascript'>
$(window).load(function(){
$(document).ready(
浏览 0提问于2016-10-11得票数 0
回答已采纳
1回答
我希望输入中有日期选择器。我只能在第一项中拿到钟。如何在所有输入中获得日期选择器？谢谢
这里是我的html:
<div>
<table class="table table-hover" border="1" cellpadding="5" cellspacing="5" width="100%" style="width:100%">
<tr>
<th>Start</th>
<th
浏览 1提问于2019-05-17得票数 0
回答已采纳
这是Units表：
<div id="table_header">Units</div>
<table class="gridView location">
<tr class="gridViewHeader">
<th><%= check_box("select", "all", {class: 'location'}) %></th>
<th>Location Code</th>
浏览 0提问于2012-10-16得票数 1
回答已采纳
1回答
我有一个绑定到数据库表的网格视图，但我必须使用的css是为html:table设计的。我想知道是否有一种简单的方法可以将网格视图转换为html表，这样我就可以用给我的样式表来显示它。
谢谢
这是我的合作伙伴为样机编写的html表的一个示例。我想模拟一下这种风格是如何应用的。
<div class="content1">
<table class="yep">
<thead>
<tr>
<th>Case #</th>
<th>Unit #<
浏览 2提问于2013-08-13得票数 0
1回答
如何减少表格行高
、、
我的桌子只有几行。我尝试了很多使用css的方法。css停止工作在高度:10px；我应该如何do.Please显示我正确的方向。有人能告诉我怎么做吗？
#gridview {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
#gridview th {
background-color: #808080;
border: 1px solid #dddddd;
text-align
浏览 2提问于2018-06-29得票数 0
1回答
我有一张html格式的桌子。我只想将单元格内容四舍五入为2位小数。
<table>
<thead>
<tr>
<th>Item</th>
<th>Price</th>
</tr>
</thead>
<tr>
<td>
浏览 0提问于2018-05-05得票数 0
2回答
此链接用于桌面视图。而这个链接如果用于移动视图。。
如何使移动视图中的这些列看起来像桌面视图中的列。
这是我的css代码。顺便说一句，我使用一个网格视图来显示表。
CSS：
#data {
display: block;
margin:20px;
width:95%;
height: 400px;
overflow-y: scroll;
}
@media only screen and (max-width: 800px) {
#data td, th {
display:none;
}
浏览 4提问于2015-06-08得票数 2
回答已采纳
我有这个css
.tableResultClass th, td {padding:18px 28px 18px; text-align:center; }
.tableResultClass th {padding-top:22px; text-shadow: 1px 1px 1px #fff; background:#e8eaeb;}
.tableResultClass td {border-top:1px solid #e0e0e0; border-right:1px solid #e0e0e0;}
.tableResultClass tr.odd-row td {backgrou
浏览 0提问于2014-03-27得票数 0
2回答
我有一个html代码：
<html>
<head>
<link rel="stylesheet" type="text/css" href="SearchCustomerStyle.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href
浏览 0提问于2015-05-25得票数 1
回答已采纳
1回答
每一行内有嵌套表的数据表
、、、、
我一直在尝试做一个HTML文档，它使用datatable，每个行都包含一个内部行和另一个表，详细说明了有关该行的更多信息，但是我遇到了关于内部行的格式和功能的问题(它只是停留在左侧，没有样式设置)。
/* Formating function for row details */
function fnFormatDetails(oTable, nTr) {
var aData = oTable.fnGetData(nTr);
var sOut = '<table>';
sOut += '<thead> <tr> &l
浏览 2提问于2016-04-14得票数 2
回答已采纳
4回答
我的CSS代码有什么问题？我想隐藏时间戳列，但它不起作用？我无法访问正文中的任何内容，因为它是自动生成的，因此我尝试使用css。
代码：
<html><head>
<meta http-EQUIV="refresh" content="5">
<style TYPE="text/css">
th, td {
padding-RIGHT: 50px;
text-ALIGN: CENTER;
}
.tb {
CLEAR: both;
}
.tsp {
display: none;
}
<
浏览 0提问于2013-06-18得票数 0
我有一张桌子，我想让它在移动视图中看起来很好看。我的想法是，我可以删除不必要的数据，以便剩余的数据将在移动设备中可见。
因此，我决定将display:none;提供给不想要的列，这是本例中的第一篇。我做这件事有问题。当我把display:none给特定的列数据时，我得到了上层列的空空间，因为它没有类来给display:none;
我无法编辑标记源，那么是否有一种方法可以仅使用媒体查询来删除移动设备的列？这就是CSS吗？
如果可能的话，怎么做呢？
HTML
<table border="1">
<tr>
<th>
浏览 2提问于2014-01-17得票数 0
回答已采纳
我正尝试在我的web应用程序中使用。我想用它来显示我公司每个部门的一些月度统计数据。因此，在图例中，我可以列出部门名称(我有7个部门)。现在我想在图表中创建7个条形图，但我还没能做到。谁能告诉我如何在图表中添加更多的条形图？
我的HTML代码：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=10
浏览 0提问于2011-12-16得票数 0
回答已采纳
3回答
表中的CSS access列
、、、、
我有一个html，它是在我将我的网格视图绑定到一个数据源时动态创建的。我好奇的是，如何使用css来访问单个列甚至单个单元格？如果我手动创建html，我会在其中添加一个id属性，但我可以这样做，因为它是在程序开始时动态创建的。下面是生成的html输出
<div>
<table cellspacing="0" rules="all" border="1" id="ContentPlaceHolderHome_GridView1" style="border-collapse:collapse;"
浏览 0提问于2012-06-26得票数 0
回答已采纳
我有一个使用几个css类的GridView，没关系。
问题是，将单个Css类应用于网格视图的边界字段是不适用的。
这是我的网格视图：
<asp:GridView ID="gvwExample" runat="server" CssClass="table table-bordered table-condensed epalist gridtextcenter" EmptyDataText="The search didn't return any records" ShowHeaderWhenEmpty="
浏览 6提问于2014-02-05得票数 0
回答已采纳
我的控制器：
public function actionResults()
{
$query = User::find();
$admins = $query->orderBy('id')->andWhere('role_id = 1')->all();
$searchModel = new AdminSearch();
$dataProvider = $searchModel->search(Yii::$app->request->queryParams);
retu
浏览 1提问于2016-03-09得票数 2
回答已采纳
我在表中有两个标题行，其中包含10+列。在第二个标题行中，我选择了几乎所有列的下拉列表。我使用bootstrap multiselect作为select字段，使用tablesorter对每列的行进行排序。最初，表没有行，表数据是通过ajax动态生成的。所以我在ajax函数中调用tablesorter。在调用表排序之前，我可以从下拉列表中进行选择，但是一旦在获取初始数据后调用它，如果我想选择另一个选项，我就不能这样做。下拉列表不起作用。下面是我的表格的一个示例：
<table>
<thead>
<tr>
<th>Vehicle</th>
浏览 19提问于2016-07-21得票数 2
回答已采纳
我有一个html表，在这里，我试图按一下按钮将表格导出为excel表，我的表代码如下所示：
<table id="basic-datatable" class="table dt-responsive nowrap">
<thead class="bg-dark">
<tr>
<th>#</th>
<th>Date</th>
<th> Party Name </th>
<
浏览 5提问于2022-03-10得票数 0
回答已采纳
2回答
固定表头可滚动表体
、、、
我必须用滚动条来设置这个表格的内容(tbody) &表格的高度是固定的。为了启用滚动，我添加了样式display: block。在那之后，桌子的宽度是冻结的，并且不能调整。给我找个办法填满桌子的宽度。
HTML：
<table class="table table-striped table-hover" id="item_table">
<thead>
<tr class="bg-primary">
<th>#</th>
浏览 30提问于2020-02-06得票数 0
希望我的帖子标题有意义。
我有七个gridview控件，从gridview1的ID开始。
请参阅下面的代码：
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false">
<Columns>
<asp:TemplateField HeaderText="Name">
<ItemTemplate>
<asp:TextB
浏览 5提问于2017-12-01得票数 0
1回答
可调整大小的网格视图列
、、、
我已经找到了这个，并且很高兴实现这个，但是它可以在任何表上工作(
<table >
<tbody>
<tr class="first">
<td width="100">
</td>
<td width="200">
</td>
<td>
浏览 0提问于2011-01-11得票数 0
我正在尝试使用数据表加载数据，但是当我运行这个页面时，它显示processing没有给出任何错误。
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="../../html/content/css/app.css">
<script sr
浏览 0提问于2015-01-12得票数 0
3回答
我在我的应用程序中使用Gridview。网格视图通过一些标题文本与数据库中的数据绑定在一起。现在我想要的是，当我滚动网格视图时，我想在移动网格视图时显示标题，我该怎么做呢？
这是我写的McArthey
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="StyleSheet2.css" rel="stylesheet" typ
浏览 0提问于2011-09-03得票数 0
回答已采纳
1回答
我需要使用C# ASP.NET根据我现有的一个表格来改变GridView的外观。实际上我有一个GridView，下面已经解释过了。
mission.aspx：
<asp:GridView ID="GridView1" runat="server"
CssClass="table table-striped table-bordered margin-top-zero">
</asp:GridView>
上面的GridView生成了下面的HTML输出。
<table class="
浏览 5提问于2015-06-26得票数 0
令我惊讶的是，我刚刚发现在当前浏览器中对表列应用文本对齐的支持相当差。火狐3.5.2、Safari4.0.3和IE8都没有显示下面的“数量”栏是右对齐的。
HTML：
<table class="full_width">
<caption>Listing employees of department X</caption>
<col></col>
<col></col>
<col></col>
<col class="amount
浏览 0提问于2009-09-08得票数 2
回答已采纳
1回答
我正在尝试通过这个在bootstrap 4中创建一个类似于Gridview的控件。一切似乎都很好，除了搜索栏，分页栏等都被延伸到页面的边界。我试着固定桌子的宽度，但它工作正常。
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<lin
浏览 11提问于2018-02-25得票数 0
回答已采纳
以下问题：
我遇到了这个问题()：
我想要第二张桌子放在第一张桌子下面。我可以通过垃圾邮件几个<br>实现这一点。但一定有更好的方法.
这是我的CSS
.aa table {
border-collapse: collapse;
}
.aa td, .aa th {
border: 1px #ddd solid;
}
.aa table {
margin: 20px 0;
}
.aa td, .aa th {
padding: 10px;
}
@media all and (min-width: 640px) {
.aa tab
浏览 2提问于2015-04-02得票数 0
回答已采纳
1回答
我需要一个网页上的表格，有一个可编辑的列。
我尝试了一个HTML，但是在tbody{height:150px; overflow:auto;}中，用正文中的列排列列标题是很困难的，而在正文中使用<input>标记则更加困难。此外，<input>在<table>中的宽度是不可更改的；size选项大约是文本框中允许的字符数。
我尝试了DevExpress，但是很难得到一个可编辑的专栏。
现在我正在尝试一个ASP Gridview，但发现它很难完成布局。这是我的新App_Themes中的CSS：
table#GridView_Samples
{
tabl
浏览 1提问于2013-10-09得票数 0
回答已采纳
1回答
下面的代码需要帮助。有两种风格：activatedRow和disactivatedRow。当用户单击按钮(位于表的TD内)时，将activatedRow或disactivatedRow应用于一行。样式的选择是基于当前样式的。例如，如果一行被激活，则按钮将禁用它，反之亦然。
所以，我对AJAX success有个问题。如何编写IF语句来检查行的当前样式？
另外，了解如何为已禁用和激活的行更改TD (按钮)也是很有趣的。
CSS
.activatedRow td {
background-color:#FFFFFF !important;
color: #000000 !impo
浏览 2提问于2012-05-27得票数 0
回答已采纳
我使用以下Javascript函数将选中的(使用复选框)行值从Gridview1复制到GridView2。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
var temprow = $('[id*=GridView2] table tbody').find(&#
浏览 1提问于2016-11-19得票数 0
4回答
我使用的是带有jQuery 1.5的jQuery验证插件1.8.0。适用于中小型表单。对于较大的表单，性能会显著下降(即使在IE8和FF4中也是如此)，有时会导致“脚本运行速度太慢”的消息。即使您指定了自定义规则，该插件似乎也会扫描表单中的整个DOM，查找要验证的属性和类。有谁知道怎么把它完全关掉吗？还有一个ignore选项，但它仍然会扫描DOM，跳过那些使用ignore属性的DOM。
以下是ASP.NET呈现的内容，只是大约有120行数据。不幸的是，不能对结果进行分页。
<table id="GridView1">
<tbody>
浏览 0提问于2011-04-05得票数 12
3回答
我想在$100上应用CSS，它是一个div元素，在一个table中。它应该是红色的，但我的CSS选择器不工作。
<!DOCTYPE html>
<html>
<head>
<style>
table {
display: table;
border-collapse: separate;
border-spacing: 2px;
border-color: gray;
}
.new > div{
color:red;
浏览 0提问于2019-06-20得票数 4
回答已采纳
1回答
网格视图拆分容器div
、、、
我是div和css的新手，所以请注意:)我在div中有一个比屏幕更宽的网格视图，而不是扩展外部div来容纳它，它爆发了。如果我把overflow放在外部的div上，我会得到一个滚动条，但我不想在div中有一个滚动条，我想让用户用浏览器的scollbar滚动。这是我的代码，任何帮助都将不胜感激。谢谢
#page
{
background-color:#EEEEEE;
vertical-align:middle;
text-align:center;
margin:5px 5px 5px 5px;
overflow:auto;
}
#OuterDiv
浏览 0提问于2012-11-17得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
