CODEWITHSUNDEEP
htmlcss
alyx
alyx

Reputation: 2733

Unable to vertically align text across table cells (HTML)

I have HTML tables nested within HTML table cells. I'm trying to vertically align the contents of the inner table with the top and bottom of the outer table cell, but the text spacing is not the same:

HTML Table

HTML code:

<table style="position:absolute;">
<tr style="position:absolute;top:30px;">
    <td>
        <table>
            <tr>
                <td>79. Sushi Regular</td>
            </tr>
            <tr>
                <td>7 pieces sushi & 1 California roll.</td>
            </tr>
        </table>
    </td>
</tr>
<tr>
    <td>
        <table>
            <tr>
                <td style="padding:8px 0 8px 0;">$17.95</td>
            </tr>
            <tr>
                <td>
                    <div style="display:inline-block;">
                        <p>Add to Cart</p>
                    </div>
                </td>
            </tr>
        </table>
    </td>
</tr>

Upvotes: 0

Views: 1328

Answers (4)

Vimal__Frontend web
Vimal__Frontend web

Reputation: 79

if you do want to use table anyways you can set the line-height of the text equal to the height of the parent td.

you will have to do something like this: 

td{
height:60px;
}

td span{
line-height:60px;
}

Alternatively you can try to set the span inside td as inline-block and set its property vertical-align:middle or try top/bottom, I dont use them much, so sometimes they just behave erratically just try the different values and see if it helps! and do give the span a height smaller than its parent if you are trying this one.

Upvotes: 0

Farzin Kanzi
Farzin Kanzi

Reputation: 3435

If you want you text to be in the top of each td add a div to each td and put the contents to the div.

td div{height:100%;}

Now you better can manage how ever you want.

Upvotes: 0

Michael Coker
Michael Coker

Reputation: 53664

In the td that you want the content to be vertically aligned, use <td valign="middle"> or <td style="vertical-align: middle;">

Upvotes: 0

stefan23
stefan23

Reputation: 46

Please do not use tables for content alignment. This is a great job for CSS flex layout.

Consider the following example: https://jsfiddle.net/zbz81kft/6/

HTML:

<div class="outer-wrapper">
  <div class="box">
    <p class="description">Two Roll Lunch</p>
    <p class="price">$9.00</p>
  </div>
  <div class="box">
    <p class="description">3. Chirashi Sushi Lunch<br>Assortment ...</p>
    <p class="price">$13.95</p>
  </div>
</div>

CSS:

.outer-wrapper {
  display: flex;
  flex-direction: row;
  width: 100%;
  align-items: stretch;
}

.box {
  background: #ddd;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 200px;
  margin: 1px;
  padding: 5px;
}

A demonstrative guide for CSS flex layout can be found here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Upvotes: 1

Related Questions