为所有表数据单元格添加底部边框

时间:2012-07-12 00:59:09

标签: html css

无论如何我可以避免将边框规格写入每个表格数据单元格吗?

<table width='800' bgcolor='grey' cellspacing='0'
style="border-bottom-style:solid; border-bottom-width:1px; border-color:black">  <tr>
<td style="border-bottom-style:solid; border-bottom-width:1px;">
First Name:<td style="border-bottom-style:solid;
 border-bottom-width:1px;"> {$info['firstname']}</td></tr>
 <tr><td style="border-bottom-style:solid; 
border-bottom-width:1px;">Last Name:
<td style="border-bottom-style:solid; border-bottom-width:1px;">
{$info['lastname']}</td> </tr>
<tr><td style="border-bottom-style:solid; border-bottom-width:1px;">
email:<td       style="border-bottom-style:solid; border-bottom-width:1px;">
{$info['email']}</td></tr>
<tr><td>password:<td>********</td></tr>

5 个答案:

答案 0 :(得分:6)

这是基本的CSS。把它放在你的文件的头部:

<style type="text/css">
    td {
      border-bottom-style:solid;
      border-bottom-width:1px;
    }
</style>

这将适用于您网页中的所有<td>。如果您希望它仅适用于某些表格单元格或某些表格,那么您将需要开始使用更高级的选择器。但是任何CSS教程都可以告诉你如何做到这一点。

顺便说一句,你也可以用你的桌子来做这件事:

table {
  border-bottom-style:solid; 
  border-bottom-width:1px; 
  border-color:black
}

或使用shorthand

table {
  border-bottom: 1px solid black;
}

您可能需要查看CSS-Tutorial

答案 1 :(得分:2)

<style>
    table td
    {
        border-bottom: 1px solid black;
    }
</style>

答案 2 :(得分:0)

table { border-bottom: solid 1px #000000;}

答案 3 :(得分:0)

使用CSS。

td {
    border-bottom: solid 1px black;
}

建议您将CSS写入另一个文件,并使用以下命令将其包含在您的网页中:

<link rel=StyleSheet href="example.css"/>

有关CSS的更多信息,请访问:http://www.w3schools.com/css

答案 4 :(得分:0)

你的代码应该是这个......

<html>
  <head>
    <style>
      table{
        background-color: grey;
        width: 800px;
        border-bottom: 1px solid black;
        border-spacing: 0;
        border-collapse: collapse;
      }
      table tr td{
        border-bottom: 1px solid black;
      }
    </style>
  </head>
  <body>
    <table cellspacing='0'>  
      <tr>
        <td>First Name:</td>
        <td> {$info['firstname']}</td>
      </tr>
      <tr>
        <td>Last Name:</td>
        <td>{$info['lastname']}</td> 
      </tr>
      <tr>
        <td>email:</td>
        <td>{$info['email']}</td>
      </tr>
      <tr>
        <td>password:</td>
        <td>********</td>
      </tr>
    </table>
  </body>
</html>