Question

我制作了这个时事通讯，但由于某种原因，标题会向右移动。我不知道是什么原因引起的。 O.o http://jsfiddle.net/3hVFp/

当我做顶部时：

<table cellspacing="0" cellpadding="0" width="810px" style="border:1px solid white;border-collapse:collapse">
    <tr>
            <td VALIGN=TOP style="width:25%; border-bottom: 1px solid #000000;">Nieuwsbrief #6</td>
            <td style="width:50%; background: #DBDBDB;"><img style="margin: 0; border: 0; padding: 0; display: block;" src="http://pietrow.net/newsletter/images/lad_wide.png"></img></td>
            <td align="right" style="width:25%; vertical-align: top; border-bottom: 1px solid #000000;" >Datum: 13-10-13</td>
    </tr>
    <tr style="background: #DBDBDB; border: 1px solid #000000; border-top: 0px; border-left: 1px solid #000000;">
            <td ><center><a href="http://home.strw.leidenuniv.nl/~kaiser/">Website</a></center></td>
            <td ><center><a href="https://www.facebook.com/LADKaiser">Facebook</a></center></td>
            <td ><center><a href="mailto:kaiser@strw.leidenuniv.nl">Contact</a></center></td>
    </tr>

虽然有效。 http://jsfiddle.net/3hVFp/2/

有没有人知道可能出现的问题？

Answer 1

从td元素中删除带百分比的宽度属性，并用colspan替换第1部分

<tr style="background: #DBDBDB; border: 1px solid #000000; border-top: 0px; border-bottom: 0px;">
            <td colspan="1"><center><a href="http://home.strw.leidenuniv.nl/~kaiser/">Website</a></center>

            </td>
            <td colspan="1"><center><a href="https://www.facebook.com/LADKaiser">Facebook</a></center></td>
            <td colspan="1"><center><a href="mailto:kaiser@strw.leidenuniv.nl">Contact</a></center>


            </td>
            </tr>

第二部分

<tr style="background: #DBDBDB; border: 1px solid #000000;" width="810px">
            <td>

                <b>Board L.A.D. 'F. Kaiser'</b><br>
                <center><br>
                Alex Pietrow<br>
                Josha van Houdt<br>
                Emanuele Di Gloria<br>
                Pawel Biernacki<br>
                Guus de Wit<br>
                Queeny van der Spek<br>
                </center>
            </td>

                <td colspan="2"><center>

                L.A.D. 'F. Kaiser'<br>
                Niels Bohrweg 2<br>
                2333 CA Leiden<br>
                <a href="mailto:kaiser@strw.leidenuniv.nl">kaiser@strw.leidenuniv.nl</a>
                </center>



            </td>

            </tr>

Answer 2

你的上一个<tr>看起来像这样：

<tr style="background: #DBDBDB; border: 1px solid #000000;" width="810px">
    <td width="50%">
      ..
    </td>
    <td colspan="2">
      ..
    </td>
</tr>

而不是

<tr ..>
  <td colspan="3">
    another <table> since you want different layout
  </td>
</tr>

这是将它转移到右边。

P.S。：调试提示：逐个元素删除内容，看看是什么导致了实际问题。

Answer 3

我已经解决了这个问题

请检查js小提琴

http://jsfiddle.net/3hVFp/3/

我已删除<td="width=50%">

Answer 4

你真的不应该使用表格，这就是CSS的用途

表宽度不起作用，向左移动太远

4 个答案: