Question

我正在尝试将Tablesorter与csstablegenerator.com表一起使用。使用tablesorter的方式，它需要thead和tbody，而csstablegenerator.com使tbody中的第一行成为头部。我可以更换其中一个以符合另一个吗？您可以看到当前结果here，我的代码在这里：

<html>
<head>
<link rel="stylesheet" type="text/css" href="/test/css/search-results.css">
</head>
<div class="CSSTableGenerator"> 
<table>
     <thead>
        <tr>
           <?php
        foreach($mykeys as $k) {
            if ($k == "name") {
              $k = "Name";
            }
            if ($k == "category") {
              $k = "Category";
            }
            if ($k == "color") {
              $k = "Color";
            }
            if ($k == "size") {
              $k = "Size";
            }
            if ($k == "currentPrice") {
              $k = "Price";
            }
            echo "<th style='cursor:pointer'>$k<img src='/test/images/UpDown.png' width='8px' height='auto' style='margin: 0px 20px'></th>";
        }
        ?>
        </tr>
        </thead>
        <tbody>
        <?php
        foreach($phpArray as $key => $values) {
            echo '<tr>';
            foreach($mykeys as $k) {
                $value = $k == "currentPrice" ? '$' . number_format($values[$k]/100,'2') : $values[$k];
                echo "<td>" . $value . "</td>";
            }
            echo '</tr>';
        }
        ?>
     </tbody>
  </table>
  </div>
</html>

在这里：

.CSSTableGenerator {
    margin:0px;padding:0px;
    width:550px;
    box-shadow: 10px 10px 5px #888888;
    border:1px solid #048a32;

    -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{
    border-collapse: collapse;
        border-spacing: 0;
    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:#d4ffaa; }
.CSSTableGenerator tr:nth-child(even)    { background-color:#ffffff; }.CSSTableGenerator td{
    vertical-align:middle;


    border:1px solid #048a32;
    border-width:0px 1px 1px 0px;
    text-align:left;
    padding:5px;
    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, #048a32 5%, #3f7f00 100%);    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #048a32), color-stop(1, #3f7f00) );
    background:-moz-linear-gradient( center top, #048a32 5%, #3f7f00 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#048a32", endColorstr="#3f7f00");  background: -o-linear-gradient(top,#048a32,3f7f00);

    background-color:#048a32;
    border:0px solid #048a32;
    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, #048a32 5%, #3f7f00 100%);    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #048a32), color-stop(1, #3f7f00) );
    background:-moz-linear-gradient( center top, #048a32 5%, #3f7f00 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#048a32", endColorstr="#3f7f00");  background: -o-linear-gradient(top,#048a32,3f7f00);

    background-color:#048a32;
}
.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;
}

Answer 1

正如@AndrewBarber在评论中所述，您需要将thead添加到css，并将td更改为th，但仅限于您从中获取的最后四个定义CSSTableGenerator输出（demo）：

/* 
  showing only the last 4 lines of the output
  add "thead" and change "td" to "th"
 */
.CSSTableGenerator thead tr:first-child th {
    ...
}
.CSSTableGenerator thead tr:first-child:hover th {
    ...
}
.CSSTableGenerator thead tr:first-child th:first-child {
    ...
}
.CSSTableGenerator thead tr:first-child th:last-child {
    ...
}

因为Tablesorter，我需要能够在第一行使用thead而不是tbody

1 个答案: