0

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

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

4 回答 4

3

你可以简单地在里面th的结束tr标签之前添加 2 个空元素吗thead（见这个例子：http: //jsbin.com/iduxem/1）？

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

.table thead th { 
  background-color: green;
}
于 2013-05-13T16:08:46.260 回答
0

尝试这个。使表格跨越整个宽度100%;

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

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

于 2013-05-13T16:06:05.837 回答
0

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

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

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

th:last-child{
    background:red;
}
于 2013-05-13T16:15:03.900 回答
0

用背景颜色为行样式<tr>着色

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

于 2013-05-13T16:10:14.050 回答