如何改变整个行的背景颜色时，头部行的列比主体行少

我想知道如何为表中的所有行设置相同的宽度?正如你在页面上看到的…我想改变头部的背景颜色，但头部没有相同的宽度，在主体元素。我怎样才能让所有行都有相同的宽度，这样背景色就能覆盖整个宽度?谢谢!

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>

您可以在thead内的关闭tr标记之前简单地添加2个空th元素(参见此示例:http://jsbin.com/iduxem/1)吗?

那么你可以使用下面的简单CSS…

.table thead th { 
  background-color: green;
}

试试这个。使用100%;

使表跨越整个宽度

table {
  width: 100%;
}
tr {
  background-color: green;
}

http://jsbin.com/oliwiq/1/

设置<tr>元素的行样式为背景色

扩展表格以使用所有可用的宽度，将<table>设置为width:100%或使用数据填充表格并让它自动调整大小

不确定你的css是什么，但你可以给你的最后一个TH类和改变颜色。

像这样:http://jsfiddle.net/thomasbrudy/sCmvj/

也可以使用最后一个子css选择器

th:last-child{
    background:red;
}

相关内容

最新更新

热门标签：