开发者

Vertical align in tables?

开发者 https://www.devze.com 2023-02-05 06:41 出处:网络
I\'m having an object in a table and I\'m unable to set vertical align (开发者_运维知识库it doesn\'t seem to work).

I'm having an object in a table and I'm unable to set vertical align (开发者_运维知识库it doesn't seem to work).

Why is that?

Example:

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


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>


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>


The text in the left column sits in the middle vertically when I extend the textbox. This is using Safari, please elaborate if something else

0

精彩评论

暂无评论...
验证码 换一张
取 消