CODEWITHSUNDEEP
htmlcsshtml-table
BruceyBandit
BruceyBandit

Reputation: 4324

How to display tables inline by lining them up by the top of the tables

I have two tables next to each other and problem is that I want both tables to display inline with each other but I want them inline with the table headings inline with each other. It does this in Internet Explorer and opera but it does not do this for Safari, Firefox and Google Chrome as in those browsers it displays the tables inline but inline by bottom of the table and not top of the table.

How can I do this?

Code is here in Jsfiddle.

Upvotes: 2

Views: 5327

Answers (2)

Rondel
Rondel

Reputation: 4951

You can use the vertical-align property to force the table to the top of the block. Change the CSS to this:

#optionAndAnswer
{
  display: inline-block;
  vertical-align: top;
}

Upvotes: 7

jefflunt
jefflunt

Reputation: 33954

This appears to work in the latest, release versions of Firefox, Safari, and Chrome if I widen the JSFiddle "Result" view enough so that both tables can fit next to each other. If the view is too narrow, it wraps the second table under the first, which is the correct, default behavior.

If you need to have them "inline" as you say regardless of the size of the view window, when you you can wrap the two tables in a div or another container, and force the size of that container to be large enough to hold the two tables.

Upvotes: 0

Related Questions