HTML&；CSS中的CSS-Table属性的行为很正常。Don'；我不知道如何修理它

我正在处理一个网页，并决定使用CSS中的表格来创建我的导航栏；一切都很好，直到我带着电子邮件地址去手机。单元格有点跳过一列。我的网页代码如下，请帮忙

HTML:

---

这真的让我很紧张，我知道还有其他更好的方法，我可能会使用它们，但我真的很想知道为什么会发生这种情况，它可能会被修复，以供将来参考。

我知道我的答案对你不会有很大帮助，也许我不了解你的所有需求，但我强烈建议您以另一种方式设计菜单，而不是使用

display:table。对于HTML和CSS代码，UL列表将更容易使用。
以下是我的做法：

HTML

<div id="header">
    <ul>
        <li class="paraLogo">Danny Wong Art</li>
        <li>Architectural Visualisation</li>
        <li>Envirnoment</li>
        <li><a href="design.html">Design</a>
        </li>
        <li><a href="character.html">Character</a>
        </li>
        <li>Digital Painting</li>
        <li>Development</li>
        <li>Resume</li>
        <li><a href="http://dintheart.tumblr.com/">Blog</a>
        </li>
        <li> <a href="mailto:dwong219@gmail.com">test219zgmail.com</a>

        </li>
    </ul>
</div>
<div id="main">
    <img id="latestImage" src="" alt="image cycler" width="1000" height="600" />
</div>
<div id="footer">&copy; 2014 Danny Wong</div>

示例：
“跳过一列”是一种原因假设。请用可直接观察到的术语描述问题。您希望发生什么，使用哪种代码，以及结果与预期有何不同？您可以将其放入JSFIDdle中吗？这里是上述qus的一部分。。据我所知，a href的问题在于，如果我将使用任何其他的，然后确定bt，那么它将向左移动..你用href做了什么吗？你有很多标记。您可能会通过样式良好的
ul
实现您所追求的目标。还是不确定你要找什么
@import url(http://fonts.googleapis.com/css?family=Freckle+Face);

body {
    background-color:       #000000;
    color:                  #FFFFFF;
}

#header {
    float:                  left;

    background-color:       tranparent;

    width:                  auto;
    height:                 auto;

    margin:                 0 0 0 0;
    padding:                0 0 0 0;

    border-width:           2px;
    border:                 solid;
}

p.paraLogo {
    font-family:            "freckle face", serif;
    font-size:              36px;
    font-style:             bold;
}

#navTableContainer {
    display:                table;

    background-color:       tranparent;

    width:                  auto;
    height:                 auto;

    margin:                 0 0 0 0;
    padding:                0 0 0 0;

    border-width:           2px;
    border:                 dotted;
}

#navTableContainer a:hover {
    color:                  red;
}

div.navTableRow {
    display:                table-row;

    width:                  auto;
    height:                 auto;

    margin:                 0 0 0 0;
    padding:                0 0 0 0;
}

div.navContent {
    display:                table-cell;

    background-color:       transparent;

    width:                  auto;
    height:                 auto;

    margin:                 0 0 0 0;
    padding:                0 0 0 0;

    border:                 solid;
    border-width:           2px;

    text-align:             center;
    vertical-align:         middle;
}

#main {
    background-color:       transparent;

    width:                  1000px;
    height:                 600px;

    margin:                 -1% auto 0 auto;
    padding:                0 0 0 0;

    border-width:           0;
}

#footer {
    background-color:       transparent;

    width:                  200px;
    margin:                 0 auto 0 auto;

    border-width:           0;
}

a:visited {
    color:                  #FFFFFF;
    text-decoration:        none;
}

a:link {
    color:                  #FFFFFF;
    text-decoration:        underline;
}

<div id="header">
    <ul>
        <li class="paraLogo">Danny Wong Art</li>
        <li>Architectural Visualisation</li>
        <li>Envirnoment</li>
        <li><a href="design.html">Design</a>
        </li>
        <li><a href="character.html">Character</a>
        </li>
        <li>Digital Painting</li>
        <li>Development</li>
        <li>Resume</li>
        <li><a href="http://dintheart.tumblr.com/">Blog</a>
        </li>
        <li> <a href="mailto:dwong219@gmail.com">test219zgmail.com</a>

        </li>
    </ul>
</div>
<div id="main">
    <img id="latestImage" src="" alt="image cycler" width="1000" height="600" />
</div>
<div id="footer">&copy; 2014 Danny Wong</div>

@import url(http://fonts.googleapis.com/css?family=Freckle+Face);
 body {
    background-color: #000000;
    color: #FFFFFF;
}
#header {
    float: left;
    background-color: tranparent;
    width: auto;
    height: auto;
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    border-width: 2px;
    border: solid;
}
#header li.paraLogo {
    font-family:"freckle face", serif;
    font-size: 36px;
    font-style: bold;
    padding: 1em 0;
}
#header ul {
    background-color: tranparent;
    list-style:none;
    width: auto;
    height: auto;
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    border-width: 2px;
    border: dotted;
}
#header ul a:hover {
    color: red;
}
#header li {
    background-color: transparent;
    width: auto;
    height: auto;
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    border: solid;
    border-width: 2px;
    text-align: center;
    vertical-align: middle;
}
#main {
    background-color: transparent;
    width: 1000px;
    height: 600px;
    margin: -1% auto 0 auto;
    padding: 0 0 0 0;
    border-width: 0;
}
#footer {
    background-color: transparent;
    width: 200px;
    margin: 0 auto 0 auto;
    border-width: 0;
}
a:visited {
    color: #FFFFFF;
    text-decoration: none;
}
a:link {
    color: #FFFFFF;
    text-decoration: underline;
}