Question

伙计我没有真正进入设计，我需要帮助，我的CSS正在我<tr>上额外的头，我使用css表生成器生成我的CSS，网站和我使用PHP html来做我的表

<html>
<title> No Deadline </title>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="./js/jquery.dynatable.js"></script>
<script src="./js/lytebox.js"></script>
<link rel="stylesheet" type="text/css" href="./css/sample.css">
<link rel="stylesheet" type="text/css" href="./css/table_blue.css">
<link rel="stylesheet" type="text/css" href="./css/jquery.dynatable.css">
<link rel="stylesheet" type="text/css" href="./css/lytebox.css">
<script>

$( document ).ready(function() {
    $('#my-table').dynatable();
});
function myFunction() {
window.open('table_admin_nodeadline.php','_self')
return true;
}
</script>
</head>
<body>
<div class="tabs">
     <ul class="tab-links">
        <li><a href="./table_admin_overdue.php">Overdue</a></li>
        <li><a href="./table_admin_next.php">Next 60 days</a></li>
        <li><a href="./table_admin_others.php">Others</a></li>
        <li class="active"><a href="#">No Deadline</a></li>
        <li><a href="./table_admin_finished.php">Finished Documents</a></li>
        <li><a href="./search.php">Database Search</a></li>
        <li><a href="./table_admin_manage.php">Manage Users</a></li>
        <li><a href="./table_admin_generate.php">Generate Report</a></li>
        <li><a href="./logout.php">Logout</a></li>
    </ul>
    <div class="tab-content">
     <div id="tab1" class="tab active">
        <?php
              include "conn.php";
                if($result = $link->query("SELECT * FROM export_workflow.COLLATERAL_MANAGEMENT 
                where ORIGINAL_DEADLINE='NULL' and SUBMITTED_PENDING='PENDING';")){
                echo "<table class='data' id='my-table'>".
                "<thead>".
                "<tr>".
                "<td>App Number</td>".
                "<td>Spoc Assigned</td>".
                "<td>Borrower Name</td>".
                "<td>App Finish Date</td>".
                "<td>Developer & Project</td>".
                "<td>Collateral Address Details</td>".
                "<td>Deferred Document</td>".
                "<td>Deferred Type</td>".
                "<td>Original Deadline</td>".
                "<td>Date Completed</td>".
                "<td>SPOC Remarks</td>".
                "<td>File Location</td>".
                "<td>JUW MA Remarks</td>".
                "<td>COSU Remarks</td>".
                "<td>SMU Notes</td>".
                "<td>SUBMITTED/PENDING</td>".
                "<td>EDIT</td>".
                "</tr></thead>";

                 while($row = $result->fetch_assoc()){echo 
                 "<tr>". 
                 "<td>".$row['APP_NUMBER']."</td>".
                 "<td>".$row['SPOC_ASSIGNED']."</td>".
                 "<td>".$row['BORROWER_NAME']."</td>".
                 "<td>".$row['APP_FINISH_DATE']."</td>".
                 "<td>".$row['DEVELOPER_PROJECT']."</td>".
                 "<td>".$row['COLLATERAL_ADDRESS_DETAILS']."</td>".
                 "<td>".$row['DEFERRED_DOCUMENT']."</td>".
                 "<td>".$row['DEFERRED_TYPE']."</td>".
                 "<td>".$row['ORIGINAL_DEADLINE']."</td>".
                 "<td>".$row['DATE_COMPLETED']."</td>".
                 "<td>".$row['SPOC_REMARKS']."</td>".
                 "<td>".$row['FILED_LOCATION']."</td>".
                 "<td>".$row['JUW_MA_REMARKS']."</td>".
                 "<td>".$row['COSU_REMARKS']."</td>".
                 "<td>".$row['SMU_NOTES']."</td>".
                 "<td>".$row['SUBMITTED_PENDING']."</td>".
                 "<td><a href='spoc_remarks.php?id=".$row['ID']."' class='lytebox' rev='afterEnd:myFunction'><image src='./images/pen.png' height=30 width=30></a></td>".
                 "</tr>";
                 }          
                 echo "</table>\r\n";
                 $result->close();
            }  else {
                 printf("<p>Error: %s</p>\r\n", $mysqli->error);
            }

            ?>
        </div>
        </div>
</div>
<body>
<html>

我的css已生成：

.data {
    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;
}.data table{
    border-collapse: collapse;
        border-spacing: 0;
    width:100%;
    height:100%;
    margin:0px;padding:0px;
}.data tr:last-child td:last-child {
    -moz-border-radius-bottomright:0px;
    -webkit-border-bottom-right-radius:0px;
    border-bottom-right-radius:0px;
}
.data table tr:first-child td:first-child {
    -moz-border-radius-topleft:0px;
    -webkit-border-top-left-radius:0px;
    border-top-left-radius:0px;
}
.data table tr:first-child td:last-child {
    -moz-border-radius-topright:0px;
    -webkit-border-top-right-radius:0px;
    border-top-right-radius:0px;
}.data tr:last-child td:first-child{
    -moz-border-radius-bottomleft:0px;
    -webkit-border-bottom-left-radius:0px;
    border-bottom-left-radius:0px;
}.data tr:hover td{

}
.data tr:nth-child(odd){ background-color:#0068b3; }
.data tr:nth-child(even)    { background-color:#ffffff; }.data td{
    vertical-align:middle;


    border:1px solid #000000;
    border-width:0px 1px 1px 0px;
    text-align:left;
    padding:3px;
    font-size:10px;
    font-family:Verdana;
    font-weight:normal;
    color:#000000;
}.data tr:last-child td{
    border-width:0px 1px 0px 0px;
}.data tr td:last-child{
    border-width:0px 0px 1px 0px;
}.data tr:last-child td:last-child{
    border-width:0px 0px 0px 0px;
}
.data tr:first-child td{
        background:-o-linear-gradient(bottom, #ffffff 5%, #ffffff 100%);    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ffffff), color-stop(1, #ffffff) );
    background:-moz-linear-gradient( center top, #ffffff 5%, #ffffff 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff", endColorstr="#ffffff");  background: -o-linear-gradient(top,#ffffff,ffffff);

    background-color:#ffffff;
    border:0px solid #000000;
    text-align:center;
    border-width:0px 0px 1px 1px;
    font-size:10px;
    font-family:Verdana;
    font-weight:bold;
    color:#ffffff;
}
.data tr:first-child:hover td{
    background:-o-linear-gradient(bottom, #ffffff 5%, #ffffff 100%);    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ffffff), color-stop(1, #ffffff) );
    background:-moz-linear-gradient( center top, #ffffff 5%, #ffffff 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff", endColorstr="#ffffff");  background: -o-linear-gradient(top,#ffffff,ffffff);

    background-color:#ffffff;
}
.data tr:first-child td:first-child{
    border-width:0px 0px 1px 0px;
}
.data tr:first-child td:last-child{
    border-width:0px 0px 1px 1px;
}

Answer 1

粗略猜测，我认为你要求thead行的样式与其他行不同。

您可以通过引入tbody元素来包装实际数据，然后将其与thead中的行分开处理来实现此目的。

类似的东西。

<table class="data" id="my-table">
    <thead>
        <tr>
            <td>App Number</td>
            <td>Spoc Assigned</td>
            etc
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>APP_NUMBER</td>
            <td>SPOC_ASSIGNED</td>
    etc
        </tr>

    </tbody>
</table>

然后父母可以选择tr/td

.data thead tr td {
    background: pink;
}
.data tbody tr:nth-child(odd) td {
    background-color:lightgreen;
}
.data tbody tr:nth-child(even) td {
    background-color:lightblue;
}

注意：您原来的选择器有一些错误，而且可能已经包含了。

首先table不是.data的后代，因此.data table不正确。我建议.data甚至table.data。

此外，.data tr:first-child将始终选择每个tr，即使它位于thead或tbody内。

.data {
  margin: 0px;
  padding: 0px;
  width: 100%;
  box-shadow: 10px 10px 5px #888888;
  border: 1px solid #000000;
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
  height: 100%;
  margin: 0px;
  padding: 0px;
}
.data thead tr td {
  background: pink;
}
.data tbody tr:nth-child(odd) td {
  background-color: lightgreen;
}
.data tbody tr:nth-child(even) td {
  background-color: lightblue;
}
.data td {
  vertical-align: middle;
  border: 1px solid #000000;
  border-width: 0px 1px 1px 0px;
  text-align: left;
  padding: 3px;
  font-size: 10px;
  font-family: Verdana;
  font-weight: normal;
  color: #000000;
}

<table class="data" id="my-table">
  <thead>
    <tr>
      <td>App Number</td>
      <td>Spoc Assigned</td>
      <td>Borrower Name</td>
      <td>App Finish Date</td>
      <td>Developer & Project</td>
      <td>Collateral Address Details</td>
      <td>Deferred Document</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>APP_NUMBER</td>
      <td>SPOC_ASSIGNED</td>
      <td>BORROWER_NAME</td>
      <td>APP_FINISH_DATE</td>
      <td>DEVELOPER_PROJECT</td>
      <td>COLLATERAL_ADDRESS_DETAILS</td>
      <td>DEFERRED_DOCUMENT</td>
    </tr>
    <tr>
      <td>APP_NUMBER</td>
      <td>SPOC_ASSIGNED</td>
      <td>BORROWER_NAME</td>
      <td>APP_FINISH_DATE</td>
      <td>DEVELOPER_PROJECT</td>
      <td>COLLATERAL_ADDRESS_DETAILS</td>
      <td>DEFERRED_DOCUMENT</td>
    </tr>
  </tbody>
</table>

css表有额外的头

1 个答案: