僅限行中的html/css邊界

我一直在研究這段代碼，現在已經碰到了一堵牆。我敢肯定，這只是因爲我一直在盯着它，在我看來，我覺得我已經嘗試了所有的解決方案，但我似乎無法讓邊框沿着每個頂部和底部運行在這張表中排。僅限行中的html/css邊界

<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>

來源

2013-04-11 Harry Meade

你所申請的代碼元素開始與該行'邊框頂部寬度：1px的;'？我想它應該是'tr' – Morpheus 2013-04-11 07:48:12

可怕的格式不正確的CSS。 – Scott 2013-04-11 07:48:12

@ Scott：我同意，我不是HTML/CSS編碼器。謝謝你的建設性投入，斯科特。這實際上解決了所有問題，顯然這個網站是爲了什麼。 – 2013-04-11 07:51:48

你已經錯過了一些東西。由於這個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-11 07:46:38

謝謝！這解決了我需要的。 – 2013-04-11 07:55:34

你需要調用#data_table td {}和#data_table th{}分別代替嵌套格式的當前已。

檢查出在這裏： http://jsfiddle.net/aCjMn/

來源

2013-04-11 07:49:09

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-11 07:55:04 Dolo

僅限行中的html/css邊界

回答

相關問題