CODEWITHSUNDEEP
csshtml
Calaf
Calaf

Reputation: 10817

Using DIVs inside table cells

In this table, not just cell B has a heading and content, but also cells A and C.

enter image description here

My attempt to set the heading and the content using DIVs is only partially successful. font-weight is observed, but vertical-align is not. Why?

CSS

<style type="text/css">
    td {
        text-align: left;
    }
    .heading {
        vertical-align: top;
        font-weight: bold
    }
    .content {
        vertical-align: middle;
    }
</style>

HTML

<table width="300px" height="300px" border="1">
    <tr>
        <td rowspan="2">A</td>
        <td>
            <div class="heading">Heading of Cell B</div>
            <div class="content">Content of Cell B</div>
        </td>
    </tr>
    <tr>
        <td>C</td>
    </tr>
</table>

Upvotes: 2

Views: 2134

Answers (3)

abfurlan
abfurlan

Reputation: 415

Try:

   td {
        text-align: left;
        vertical-align:top;

    }

    .heading {
        font-weight: bold;
    }
    .content {
        margin: auto;
        line-height: 200px;
    }

http://jsfiddle.net/Xvx83/

Upvotes: 0

user3037493
user3037493

Reputation: 312

vertical align won't work on an element that is displayed in-line, like a div. you can put another table inside of your TD, or change your css to something like this:

<style type="text/css">
    td {
        text-align: left;
    }
    .heading {
            position: relative;
    top: 0;
    background: blue;
    height: 150px;
    }
    .content {
      position: relative;
    bottom: 0;
    background: yellow;
    height: 150px;
    }

</style>

Upvotes: 0

ryan0319
ryan0319

Reputation: 412

verticle align should be middle

 verticle-align: middle;

This will place the text in the middle. Although you have to be aware that is places it in the middle on the line (not the container) so you need a line-height

 line-height: xxx;

Or use div's and mimic a table: http://jsfiddle.net/rf2kC/

Upvotes: 1

Related Questions