仅行中的 html/css 边框答案

【问题标题】：html/css borders in rows only仅行中的 html/css 边框
【发布时间】：2013-04-03 07:39:08
【问题描述】：

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

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

【问题讨论】：

您正在应用以border-top-width: 1px; 这一行开头的代码的哪个元素？我想应该是tr
CSS 格式严重错误。
@Scott：我同意，我不是 HTML/CSS 编码器。不过，感谢您的建设性意见，斯科特。这实际上解决了所有问题，很清楚这个网站的用途。
@Morpheus 我尝试将该部分添加到 tr 但似乎没有用。

标签： html css rows

【解决方案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>

【讨论】：

【解决方案2】：

您需要分别调用#data_table td {} 和#data_table th{}，而不是您目前使用的嵌套格式。

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

【讨论】：

【解决方案3】：

http://jsfiddle.net/dolours/s25jN/这个fiddle会解决问题

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


 }

【讨论】：