Question

我想知道如何为表中的所有行提供相同的宽度？正如您在页面中看到的那样...我想更改标题的背景颜色，但标题的宽度与正文中的元素不同。如何为所有行设置相同的宽度，以便背景颜色覆盖整个宽度？谢谢！

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

Answer 1

您是否可以在th内的结束tr标记之前添加2个空thead元素（参见此示例：http://jsbin.com/iduxem/1）？

然后你可以使用以下简单的CSS ...

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

Answer 2

试试这个。使表格与100%;

一起跨越整个宽度

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

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

Answer 3

为具有背景颜色的<tr>元素的行样式着色

展开表格以使用所有可用宽度，将<table>样式设置为宽度：100％或用数据填充表格并让它自动自动调整

Answer 4

不确定你的css是什么，但你可以给你的最后一个课程并更改颜色。

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

或者你也可以使用last-child css选择器。

th:last-child{
    background:red;
}

当thead行的列少于tbody行时，如何更改整行的背景颜色？

4 个答案: