我正在使用表格排序插件，但我的表格看起来很糟糕，所以我决定尝试设计一下它的样式。
不太擅长 css 我试图在网上找到一些预制的设计，然后我找到了这个网站:
http://www.csstablegenerator.com/
我从那里得到了我的 CSS 代码:
.CSSTableGenerator {
margin:0px;padding:0px;
width:100%;
box-shadow: 10px 10px 5px #888888;
border:1px solid #000000;
-moz-border-radius-bottomleft:0px;
-webkit-border-bottom-left-radius:0px;
border-bottom-left-radius:0px;
-moz-border-radius-bottomright:0px;
-webkit-border-bottom-right-radius:0px;
border-bottom-right-radius:0px;
-moz-border-radius-topright:0px;
-webkit-border-top-right-radius:0px;
border-top-right-radius:0px;
-moz-border-radius-topleft:0px;
-webkit-border-top-left-radius:0px;
border-top-left-radius:0px;
}.CSSTableGenerator table{
width:100%;
height:100%;
margin:0px;padding:0px;
}.CSSTableGenerator tr:last-child td:last-child {
-moz-border-radius-bottomright:0px;
-webkit-border-bottom-right-radius:0px;
border-bottom-right-radius:0px;
}
.CSSTableGenerator table tr:first-child td:first-child {
-moz-border-radius-topleft:0px;
-webkit-border-top-left-radius:0px;
border-top-left-radius:0px;
}
.CSSTableGenerator table tr:first-child td:last-child {
-moz-border-radius-topright:0px;
-webkit-border-top-right-radius:0px;
border-top-right-radius:0px;
}.CSSTableGenerator tr:last-child td:first-child{
-moz-border-radius-bottomleft:0px;
-webkit-border-bottom-left-radius:0px;
border-bottom-left-radius:0px;
}.CSSTableGenerator tr:hover td{
}
.CSSTableGenerator tr:nth-child(odd){ background-color:#aad4ff; }
.CSSTableGenerator tr:nth-child(even) { background-color:#ffffff; }
.CSSTableGenerator td{
vertical-align:middle;
border:1px solid #000000;
border-width:0px 1px 1px 0px;
text-align:left;
padding:7px;
font-size:10px;
font-family:Arial;
font-weight:normal;
color:#000000;
}.CSSTableGenerator tr:last-child td{
border-width:0px 1px 0px 0px;
}.CSSTableGenerator tr td:last-child{
border-width:0px 0px 1px 0px;
}.CSSTableGenerator tr:last-child td:last-child{
border-width:0px 0px 0px 0px;
}
.CSSTableGenerator tr:first-child td{
background:-o-linear-gradient(bottom, #005fbf 5%, #003f7f 100%); background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #005fbf), color-stop(1, #003f7f) );
background:-moz-linear-gradient( center top, #005fbf 5%, #003f7f 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#005fbf", endColorstr="#003f7f"); background: -o-linear-gradient(top,#005fbf,003f7f);
background-color:#005fbf;
border:0px solid #000000;
text-align:center;
border-width:0px 0px 1px 1px;
font-size:14px;
font-family:Arial;
font-weight:bold;
color:#ffffff;
}
.CSSTableGenerator tr:first-child:hover td{
background:-o-linear-gradient(bottom, #005fbf 5%, #003f7f 100%); background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #005fbf), color-stop(1, #003f7f) );
background:-moz-linear-gradient( center top, #005fbf 5%, #003f7f 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#005fbf", endColorstr="#003f7f"); background: -o-linear-gradient(top,#005fbf,003f7f);
background-color:#005fbf;
}
.CSSTableGenerator tr:first-child td:first-child{
border-width:0px 0px 1px 0px;
}
.CSSTableGenerator tr:first-child td:last-child{
border-width:0px 0px 1px 1px;
}
问题是他们想给我表格的代码，但我想使用我自己的代码，但我无法将两者结合在一起。
他们想让我使用的代码是这样的:
<div class="CSSTableGenerator" >
<table >
<tr>
<td>
Title 1
</td>
<td >
Title 2
</td>
<td>
Title 3
</td>
</tr>
<tr>
<td >
Row 1
</td>
<td>
Row 1
</td>
<td>
Row 1
</td>
</tr>
<tr>
<td >
Row 2
</td>
<td>
Row 2
</td>
<td>
Row 2
</td>
</tr>
<tr>
<td >
Row 2
</td>
<td>
Row 2
</td>
<td>
Row 2
</td>
</tr>
<tr>
<td >
Row 3
</td>
<td>
Row 3
</td>
<td>
Row 3
</td>
</tr>
</table>
</div>
当我尝试将它们混合在一起时，我得到了这个:
如您所见，表头看起来是一行，而第一个实际行看起来应该是表头......
经过调查，我注意到他们为预制表格提供的代码不使用标题...我将我的更改为 td 而不是 th 并且看起来不错。但我需要一个 th，因为首先它是正确的编程方式，其次我正在使用 jquery 插件对我的表进行排序，如果我没有 th 就会中断。
让 css 和我的 jquery 插件协同工作的任何简单方法。我应该只需要更改一些 css，但我尝试了一些不同的东西，这个 css 似乎很顽固，不容易改变。
非常感谢任何帮助，谢谢!
忘记为我的表添加我的代码:
<table id=\"myTable\" class=\"tablesorter\" >
<thead>
<tr>
<th>Beer Name</th>
<th>User Rating</th>
<th> Your Rating</th>
</tr>
</thead>
<tbody>";
//database call was here, but taken out. Not important to table code
for($i = 0; $i<$FriendBeersNum;$i++){
$row = $resultBeers->fetch_assoc();
$fBeerName = $row['beerName'];
$fBeerRating = $row['rating'];
$fBeerID = $row['beerID'];
$beerURL = "beerPage.php?id=$fBeerID";
//another database call not needed for table help, just getting info for table
if( $myBeerNum > 0){
$rowMyBeer = $resultMyBeer->fetch_assoc();
$myrating = $rowMyBeer['rating'];
}
else { $myrating = "N/A";}
print "
<tr>
<td> <a href=\"$beerURL\"> $fBeerName </a> </td>
<td> $fBeerRating </td>
<td> $myrating </td>
</tr>
最佳答案
如果您希望表格标题看起来与表格单元格相同，只需将标题添加到您已经为单元格设置的任何样式即可。
但是在本示例中，您实际上想要将现有的标题样式从 td 更改为 th。
所以这个
.CSSTableGenerator tr:first-child td {
styles here
}
应该改为
.CSSTableGenerator tr:first-child th {
styles here
}
只是为了稍微整理一下，您应该删除 .CSSTableGenerator tr:first-child:hover td 并更改
.CSSTableGenerator tr:first-child td:first-child {
border-width: 0px 0px 1px 0px
}
到
.CSSTableGenerator tr:first-child td:first-child {
border-width: 0px 1px 1px 0px
}
这是一个 fiddle - http://jsfiddle.net/ajcw/r5Prz/
关于jquery - 试图将 css 应用于 html 表并忽略我的 th，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12628972/