当前位置：文江博客话题详情

表格垂直对齐？

发布于 2024-10-12 23:32:32 字数 194 浏览 7 评论 0原文

我的表格中有一个对象，但无法设置垂直对齐（它似乎不起作用）。

这是为什么？

示例：

http://jsfiddle.net/PHDWz/1/

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

薔薇婲 2024-10-19 23:32:32

当我给 td 一个高度时..内容在中间垂直对齐....

<table cellspacing="0">
    <thead>
        <tr>
            <th scope="col" style="width: 180px">Description</th>
            <th scope="col">Textarea</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td height="400">Bla bla bla! Write something if you like! </td>
            <td>
                <textarea></textarea>  <span><img src="http://www.qualtrics.com/university/wp-content/plugins/wp-print/images/printer_famfamfam.gif" alt="printer"> A printer!</span>
            </td>
    </tbody>
</table>

When I give the td a height.. the content is vertical aligned in the middle....

<table cellspacing="0">
    <thead>
        <tr>
            <th scope="col" style="width: 180px">Description</th>
            <th scope="col">Textarea</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td height="400">Bla bla bla! Write something if you like! </td>
            <td>
                <textarea></textarea>  <span><img src="http://www.qualtrics.com/university/wp-content/plugins/wp-print/images/printer_famfamfam.gif" alt="printer"> A printer!</span>
            </td>
    </tbody>
</table>

回复收藏 0 原文

吃素的狼 2024-10-19 23:32:32

只需添加一个附加列即可避免出现“A 打印机！”链接被迫以底部对齐方式附加到文本区域。
在你的CSS中，你可以省略跨度的垂直对齐，因为你在外部td中重复了它。

<table cellspacing="0">
<thead>
    <tr>
        <th scope="col" style="width: 180px">Description</th>
        <th scope="col" colspan="2">Textarea</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>Bla bla bla! Write something if you like! </td>
        <td><textarea></textarea></td>
        <td><span><img src="http://www.qualtrics.com/university/wp-content/plugins/wp-print/images/printer_famfamfam.gif" alt="printer"> A printer!</span>
        </td>
</tbody>

just add an additional column to avoid the "A printer!" link being forced to be kind of attached as align-bottom to the textarea.
In your css you may omit the vertical-align for the span as you have this duplicated in the outer td.

<table cellspacing="0">
<thead>
    <tr>
        <th scope="col" style="width: 180px">Description</th>
        <th scope="col" colspan="2">Textarea</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>Bla bla bla! Write something if you like! </td>
        <td><textarea></textarea></td>
        <td><span><img src="http://www.qualtrics.com/university/wp-content/plugins/wp-print/images/printer_famfamfam.gif" alt="printer"> A printer!</span>
        </td>
</tbody>

回复收藏 0 原文