表格单元格中的内容未对齐

Question

我正在制作一些表格内容并遇到一些问题 当我想向第一个表列添加更多文本时，它会为所有其他列添加额外的空间 在这里你可以看到我在说什么

你可以检查我的小提琴 here

HTML

<table id="mytable" border="1">
    <tr>
        <td>
            <img src="" />
                <span>some text<br>asdasd<br>asdas</span>
        </td>
        <td>
            <img src="" />
                <span>some text</span>
        </td>

    </tr>
</table>

CSS

    #mytable{
    width:400px;
}
#mytable tr td{
    padding:10px;
}
#mytable tr td img{
    width:200px;
    height:100px;
}

Answer 1

您应该为vertical-align元素设置td

#mytable tr td{
    padding:10px;
    vertical-align: top; /* Add this */
}

Demo

Answer 2

您可以使用vertical-align: top;到#mytable tr td

来执行此操作

JSFiddle - DEMO

<强> HTML：

<table id="mytable" border="1">
    <tr>
        <td>
            <img src="" /> <span>some text<br>asdasd<br>asdas</span>
        </td>
        <td>
            <img src="" /> <span>some text</span>
        </td>
    </tr>
</table>

<强> CSS：

#mytable{
    width:400px;
}
#mytable tr td{
    padding:10px;
    vertical-align: top;
}
#mytable tr td img{
    width:200px;
    height:100px;
}

Answer 3

为

添加填充

#mytable tr td{
padding:10px;
vertical-align: top; /* Add this */
}

您的问题将得到解决。