当广告行的行数少于正文行的行数时，如何更改整个行的背景色？
[英]How to change the background-color of the whole row when thead row has less columns than tbody rows?
问题描述
I'm wondering how can I have the same width for all the rows in the table? 
我想知道表中所有行的宽度如何相同？ As you can see in the page...I want to change the background color of the header but the header doesnt have the same width as the element in the body. 正如您在页面中看到的那样...我想更改标题的背景颜色，但标题与正文中的元素没有相同的宽度。 How can I have the same width for all the rows so the background color covers the whole width? 如何为所有行都设置相同的宽度，以便背景色覆盖整个宽度？ Thanks! 谢谢！
http://jsbin.com/ucafeh/1/ http://jsbin.com/ucafeh/1/
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery.min.js"></script>
<link href="http://twitter.github.io/bootstrap/assets/css/bootstrap.css" rel="stylesheet" type="text/css" />
<link href="http://twitter.github.io/bootstrap/assets/css/bootstrap-responsive.css" rel="stylesheet" type="text/css" />
<script src="http://twitter.github.io/bootstrap/assets/js/bootstrap.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<!-- the dark background has to cover the whole width of the second row...-->
<table class="table table-striped">
<thead>
<tr>
<th>Date</th>
<th>hl</th>
<th>Invoice</th>
<th>fefe</th>
<th>fefefef</th>
<th>fe VAT</th>
<th>C. dfgdf VAT</th>
<th>dfgdf</th>
</tr>
</thead>
<tbody>
<tr>
<th><a class="inData" href="">17.17.17</a></th>
<th><a class="inData" href="">50123</a></th>
<th><a class="inData" href="">Invoice</a></th>
<th><a class="inData" href="">Hola señor</a></th>
<th><a class="inData" href="">-123.00</a></th>
<th><a class="inData" href="">111</a></th>
<th><a class="inData" href="">1200</a></th>
<th><a class="inData" href="">GSP</a></th>
<th><a class="deleteItem" href="#"><img src="" alt=""/>item</a></th>
<th><a href="#myModal" role="" class="" data-toggle="modal">last-item</a></th>
</tr>
4 个解决方案
解决方案1
3 已采纳 2013-05-13 16:08:46
Can you simply add 2 empty th elements before the closing tr tag inside thead (see this example: http://jsbin.com/iduxem/1 )? 您可以简单地在thead tr标记之前添加2个空的th元素（请参见以下示例： http : //jsbin.com/iduxem/1 ）？
Then you could use the following simple CSS... 然后，您可以使用以下简单的CSS ...
.table thead th {
background-color: green;
}
解决方案2
0 2013-05-13 16:06:05
Try this. 尝试这个。 Make the table span the whole width with 100%; 使表格跨度为100%;
table {
width: 100%;
}
tr {
background-color: green;
}
解决方案3
0 2013-05-13 16:10:14
to color a row style the <tr> element with a background color 用背景色为<tr>元素着色行样式
to expand the table to use all available width, style the <table> to be width:100% or fill the table with data and let it autosize itself 要扩展表格以使用所有可用宽度，将<table>设置为width：100％或用数据填充表格，并使其自动调整大小
解决方案4
0 2013-05-13 16:15:03
Not sure what your css was, but you can give your last TH a class and change the color. 不确定您的CSS是什么，但是您可以给您的最后一个TH上一堂课，然后更改颜色。
Like so: http://jsfiddle.net/thomasbrudy/sCmvj/ 像这样： http : //jsfiddle.net/thomasbrudy/sCmvj/
Or you can also use the last-child css selector. 或者，您也可以使用最后一个子CSS选择器。
th:last-child{
background:red;
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.