2

我已经在这段代码上工作了一段时间，但遇到了一堵墙。我敢肯定，这只是因为我已经盯着它看了足够长的时间，以至于在我看来，我觉得我已经尝试了所有解决方案，但我似乎无法在每个解决方案的顶部和底部找到一个边框此表中的行。

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title></title>
 <style>

 #data_table {
    td {    
            border-bottom: solid;
            background-color: #000099;
            font-family: arial;
            font-size: 12px;
    }
    th {
            background-color: #cccccc;
            font-family: arial;
            font-size: 12px;
            font-weight: bold;


 }
  border-top-width: 1px;
border-top-style: solid; /* double, dashed, dotted... */
border-top-color: #000;

    border-bottom-width: 3px;
border-bottom-style: solid; /* double, dashed, dotted... */
border-bottom-color: #000;





    margin: 8px;
padding: 0px;
padding-left: 10px;
padding-right: 10px;

word-wrap: break-word;
table-layout: fixed;
width: 700px;
background-color: #f5f5f5


 }
 </style>
</head>
<body>

    <form action="testreport.php" method="post">
 First Name: <input type="text" name="FirstName">
 Last Name: <input type="text" name="LastName">
 Start Date(YYYY-MM-DD): <input type="text" name="StartDate">
 End Date(YYYY-MM-DD): <input type="text" name="EndDate">
 <input type="submit">
 </form>

     <table id="data_table"><tr><th align=left>Date</th><th align=left>Description</th><th align=left>Amount</th></th><th align=left>Balance</th><tr><td>2009-08-01</td><td>YDP 09/10: Registration Fee for Lauren Stone</td><td>25.00</td><td>Balance</td></tr><tr><td>2009-08-01</td><td>YDP 09/10: Tuition for Lauren Stone (Quarter 1)</td><td>1275.75</td><td>Balance</td></tr><tr><td>2009-10-01</td><td>YDP 09/10: Tuition for Lauren Stone (Quarter 2)</td><td>1275.75</td><td>Balance</td></tr><tr><td>2009-12-01</td><td>YDP 09/10: Tuition for Lauren Stone (Quarter 3)</td><td>1275.75</td><td>Balance</td></tr><tr><td>2010-02-01</td><td>YDP 09/10: Tuition for Lauren Stone (Quarter 4)</td><td>1275.75</td><td>Balance</td></tr><tr><td>2010-08-01</td><td>YDP 10/11: Registration Fee for Lauren Stone</td><td>25.00</td><td>Balance</td></tr><tr><td>2010-08-01</td><td>YDP 10/11: Tuition for Lauren Stone (Quarter 1)</td><td>1084.81</td><td>Balance</td></tr><tr><td>2010-10-01</td><td>YDP 10/11: Tuition for Lauren Stone (Quarter 2)</td><td>1084.81</td><td>Balance</td></tr><tr><td>2010-12-01</td><td>YDP 10/11: Tuition for Lauren Stone (Quarter 3)</td><td>1084.80</td><td>Balance</td></tr><tr><td>2011-02-01</td><td>YDP 10/11: Tuition for Lauren Stone (Quarter 4)</td><td>1084.81</td><td>Balance</td></tr></table>        

</body>

4

3 回答 3

1

你错过了一些东西。因为这段 CSS 代码不太好。由我修改使用它。

<style>

 #data_table {
    border-top-width: 1px;
border-top-style: solid; /* double, dashed, dotted... */
border-top-color: #000;

    border-bottom-width: 3px;
border-bottom-style: solid; /* double, dashed, dotted... */
border-bottom-color: #000;
 margin: 8px;
padding: 0px;
padding-left: 10px;
padding-right: 10px;

word-wrap: break-word;
table-layout: fixed;
width: 700px;
background-color: #f5f5f5


 }

#data_table td {    
            border-bottom: solid;
            background-color: #000099;
            font-family: arial;
            font-size: 12px;
    }
   #data_table th {
            background-color: #cccccc;
            font-family: arial;
            font-size: 12px;
            font-weight: bold;


 }
 </style>
于 2013-04-11T07:46:38.667 回答
0

http://jsfiddle.net/dolours/s25jN/这个小提琴将解决问题

#data_table {
   border-top-width: 1px;
border-top-style: solid;
border-top-color: #000;
border-bottom-width: 3px;
border-bottom-style: solid;
border-bottom-color: #000;
margin: 8px;
padding: 0px;
padding-left: 10px;
padding-right: 10px;
word-wrap: break-word;
table-layout: fixed;
width: 700px;
background-color: #f5f5f5;
border-spacing: 0px;

 }

#data_table td {    
            border-bottom: solid;

            font-family: arial;
            font-size: 12px;
    border-bottom:1px solid #ddd;
    }
   #data_table th {
            background-color: #cccccc;
            font-family: arial;
            font-size: 12px;
            font-weight: bold;


 }
于 2013-04-11T07:55:04.790 回答
0

您需要单独调用#data_table td {}and#data_table th{}而不是当前使用的嵌套格式。

在这里查看：http: //jsfiddle.net/aCjMn/

于 2013-04-11T07:49:09.473 回答