CODEWITHSUNDEEP
htmlcss
Sam
Sam

Reputation: 111

HTML table icons not sitting in a line

I have a tick based pricing table. Two of the ticks are not in vertical alignment with the other ticks.

For your convinence I've taken a print screen and highlited them:

Screenshot

The page itself is found here.

Upvotes: 1

Views: 298

Answers (3)

laaposto
laaposto

Reputation: 12213

The problem is wheb you include a text "Restricted" inside td rather than the image with the green tick. You should set the width of td lower so that the green ticks are aligned

Just change this css

table.header-features tr td {
   text-align: center !important;
   width: 212px !important;
}

to this:

table.header-features tr td {
    text-align: center !important;
    width: 145px !important;
}

Upvotes: 1

Marcelo
Marcelo

Reputation: 4425

The 'width' property in table elements is not always respected by browsers and can lead to inconsistent behavior. Instead, use properties like 'min-width' and 'max-width' when trying to set table widths.

Ex.

table.header-features tr td {
   text-align: center !important;
   min-width: 33% !important;
   max-width: 33% !important;
}

Upvotes: 1

Brandon Stillitano
Brandon Stillitano

Reputation: 1638

You could do this to avoid changing the style sheets. Although please do keep in mind that stylesheets are a better method to achieve this.

<td style="text-align: center !important; width: 145px !important;">

Upvotes: 1

Related Questions