html - 我想要表格的每个单元格边框都有填充和点缀

Question

我希望每个单元格的边框如下图所示：

<table border="1" width="90%">
<tr>
    <th>NAME OF OFFEROR</th>
    <th>EMPLOYER</th>
    <th>FAMILY/BECHLOR</th>
    <th>NATURE OF LEASE</th>
    <th>RENT</th>
    <th>DEPOSIT</th>
    <th>TERM OF LEASE</th>
</tr>
<?PHP
    $query=mysql_query("select name,company,categary,lease,tol,rent,deposit from client_enquiry where pro_id='".$property."'") or die(mysql_error());
    while($row=mysql_fetch_row($query))
    {
        echo "<tr><td>".$row[0]."</td><td>".$row[1]."</td><td>".$row[2]."</td><td>".$row[3]."</td><td>".$row[5]."</td><td>".$row[6]."</td><td>".$row[4]."</td></tr>";
    }
?>
</table>

Answer 1

我在这里为你做了一个例子：http: //jsfiddle.net/paulalexandru21/yyjtB/

我建议你不要使用表格，因为它们是有点旧的元素，不是很优化。Div 是更好的。代码如下所示：

html:

    <div class="col border">
    <div class="head">
        <p>Gold</p>
        <small>FREE</small>         
    </div>
    <ul>
        <li><b>5</b> products</li>            
        <li><b>1</b> image per product</li>
        <li><b>Basic</b> stats</li>
        <li><b>Basic</b> customization</li>        
    </ul>
</div>
<div class="col border">
    <div class="head">
        <p>Platinum</p>
        <small>FREE</small>        
    </div>
    <ul>
        <li><b style="color: #76CAC6">25</b> products</li>
        <li><b style="color: #76CAC6">3</b> image per product</li>
        <li><b style="color: #76CAC6">Better</b> stats</li>
        <li><b style="color: #76CAC6">Full</b> customization</li>        
    </ul>
</div>
<div class="col border">
    <div class="head">
        <p>Diamond</p>
        <small>FREE</small>        
    </div>
    <ul>
        <li><b style="color: #87BE84">100</b> products</li>
        <li><b style="color: #87BE84">5</b> image per product</li>
        <li><b style="color: #87BE84">Best</b> stats</li>
        <li><b style="color: #87BE84">Full</b> customization</li>        
    </ul>
</div>

CSS：

    html, body {font-family: arial;}

.col {
    height: 500px;
    width: 200px;
    float: left;
}

.arange {
    padding-top: 20px;
    background: pink;
}

.border {
    border-right: 1px dotted gray;
}

.head{
    padding-top: 20px;
    background: #000;
    color: #FFF;
    width: 200px;
    height: 90px;
    lign-height: 100px;
}

p {
    font-size: 18pt;
    font-family: arial;
    color: white;
    margin-left: 20px;
}

small {
    font-size: 10pt;
    font-family: arial;
    color: gray;
    font-weight: bold;
    margin-left: 20px;
}

ul {
    margin-left: 20px;
    margin-right: 20px;
    color: gray;
}

ul li {
    padding: 10px 0px;
    border-bottom: 1px dotted gray;
    font-size: 15px;
}

blue {color: #76CAC6;}

Answer 2

您应该发布您的 HTML 和 CSS 以显示您尝试过的内容。

顺便说一句，您可以在 TD 中使用 div 来获取底部边框：

http://jsfiddle.net/jzx2N/2/

编辑：保持 TD 高度和宽度对齐的新代码...

CSS

table{
  border-collapse: collapse;
  margin: 20px;  
}

td{
   padding-top: 15px;
   padding-bottom: 15px;
   border-right: 2px dotted silver;
   border-left: 2px dotted silver;
   vertical-align: bottom;
   width: 33%;
}

.tdLeft{
   border-left: none;
}

.tdRight{
   border-right: none;
}

.innerDiv{
    border-bottom: 2px dotted silver;
    padding-left: 20px;
    padding-right: 20px;
    height: 100%;
    margin-left: 20px;
    margin-right: 20px;
    padding-bottom: 20px;
}

HTML

<table>
    <tr>
        <td class="tdLeft">
            <div class="innerDiv">
             Stuff on column
            </div>
        </td>
        <td>
            <div class="innerDiv">
             Stuff on column
            </div>
        </td>
        <td class="tdRight">
            <div class="innerDiv">
             Stuff on column
            </div>
        </td>        
    </tr>    
    <tr>
        <td class="tdLeft">
            <div class="innerDiv">
             Stuff on column
            </div>
        </td>
        <td>
            <div class="innerDiv">
             Stuff on column
            </div>
        </td>
        <td class="tdRight">
            <div class="innerDiv">
             Stuff on column
            </div>
        </td>        
    </tr>
    <tr>
        <td class="tdLeft">
            <div class="innerDiv">
             Stuff on column
            </div>
        </td>
        <td>
            <div class="innerDiv">
             Stuff on column
            </div>
        </td>
        <td class="tdRight">
            <div class="innerDiv">
             Stuff on column
            </div>
        </td>        
    </tr>
</table>

Answer 3

查看 CSS 属性：

border
border-spacing

并将它们应用到您的桌子上。