html - 当我使用表格时出现某种边框

Question

我正在尝试设计一个网页，并且我设置了一个 3 列 1 行的表格（页面底部）。如下图所示。

正如您在该图中看到的那样，一些边框出现在 td 标签的开头（由黑色圆圈标记）。我已将边框设为 0，但仍然没有效果。为什么会发生，我应该如何解决？

我提供了下面的代码..

HTML

<div class="wrapper col3">

      <div id="intro">

            <div class="fl_left">

                  <div class="UpperSlideShow">

                  </div>
                  <div class="LowerFlyUps">
                        <table class="HoverTable" cellpadding="0" cellspacing="0" border="0" style="margin-left:2px;">
                        <tr>
                        <td>

                              <div class="box" id="box">
                                    <div class="inner">
                                          <h4>Header One</h4>        
                                          <p>Content One, Team Pwn helped us identify the root cause of our problems and delivered effective solutions to tackle them.</p>
                                    </div>
                              </div>
                        </td>
                        <td>
                              <div class="box" id="box1">
                                    <div class="inner">
                                          <h4>Header Two</h4>        
                                          <p>Content One, Team Pwn helped us identify the root cause of our problems and delivered effective solutions to tackle them.</p>
                                    </div>
                              </div>
                        </td>
                        <td>
                              <div class="box" id="box2">
                                    <div class="inner">
                                          <h4>Header Three</h4>        
                                          <p>Content One, Team Pwn helped us identify the root cause of our problems and delivered effective solutions to tackle them.</p>
                                    </div>
                              </div>
                        </td>
                        </tr>
                        </table>

                  </div>

            </div>

            <div class="fl_right"><img src="images/demo/380x300.gif" alt="" /></div>
            <br class="clear" />
      </div>
</div>

CSS

table.HoverTable
{
    border: 0px;
}


table.HoverTable tr
{
    border: 0px;
}


table.HoverTable tr rd
{
    border: 0px;
}
.box {
    position: absolute;
    bottom: 0;
    width: 175px;
    height: 40px;
    overflow: hidden;
    color: #FFFFFF;
    font: 12px Tahoma,sans-serif;
    background-color: #284062;
    margin-right: 10px;
    float: left;
    text-align:center;
}

.inner {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}
.box h4 {
    padding-bottom: 10px;
    border-bottom: 1px solid #fff;
    font: 18px Tahoma,sans-serif;
    text-transform: capitalize;
    margin: 10px;
}
.box p {
    margin: 0 10px;            
}
#intro
{
    padding:30px 0 5px 0;
    font-size:16px;
    font-family:Georgia, "Times New Roman", Times, serif;
}

#intro .fl_left
{
    display:block;
    float:left;
    width:575px;
    height:300px;
    margin:0;
    color:#FFFFFF;
    background-color:#2684B7;
}

#intro .fl_left h3
{
    font-size: 24px;
    padding:0;
    border:none;
    color:#FFFFFF;
    text-align:center;
    line-height:2em;
}

#intro .fl_left p
{
    margin:0;
    padding:0;
    line-height:1.6em;
}

#intro .fl_left p.readmore
{
    display:block;
    width:100%;
    margin:20px 0 0 0;
    padding:0;
    text-align:right;
    line-height:normal;
}

#intro .fl_left p.readmore a
{
    padding:8px 15px;
    font-size:18px;
    color:#FFFFFF;
    background-color:#1C5E82;
}

#intro .fl_right{float:right;}

Javascript

$(document).ready(function() {

    $(".box").hover(function ()
    {
        $(this).animate({height: 200});
    }, function () 
    {
        $(this).animate({height: 40});
    }
    );

});

Answer 1

这是造成它，左右边界。http://jsfiddle.net/SdDeH/4/

    table tbody td {
vertical-align: top;
border-collapse: collapse;
border-left: 1px solid #CCC;
border-right: 1px solid #CCC;
}

改成

table tbody td {
    vertical-align: top;
    border-collapse: collapse;
    }

Answer 2

我无法复制您的问题。但是你可以尝试添加border-collapse:collapse; 到桌子上。

table.HoverTable
{
  border: 0px;
  border-collapse:collapse;
}