Html table how to make all columns same height_问答_开发者

Html table how to make all columns same height

开发者 https://www.devze.com 2022-12-22 22:03 出处：网络

I want to display 4 or 5 boxes(vary) which occupy\'s 100% of the page width, so it will span start to end of page. and want height just to fit contents.

相关专题：css

I want to display 4 or 5 boxes(vary) which occupy's 100% of the page width, so it will span start to end of page. and want height just to fit contents.

I am trying to use table for that so it will assign width for each box and fill up whole row.

Problem with code below is all divs in td are centered and does not have same height. tried all i can think of but it doesn't work. tried vertical alignment, height to 100% .....

How can i have all div in td with same height?

Also if there is another way to doing same please let me know. I am html dummy so may not using the right thing.

<table style="width: 100%; text-align:justify;">
    <tr>
        <td>
            <div style="margin-right:15px; background-color:Gray">
                 Some text here
            </div>
        </td>
        <td>
            <div style="margin-right: 15px; background-color:Gray">
                colu开发者_StackOverflow社区mn 2 text here
            </div>
        </td>
        <td>
            <div style="margin-right: 15px; background-color:Gray">
                Column 3 text here
            </div>
        </td>
        <td>
            <div style="background-color:Gray">
                Last column text here
            </div>
        </td>
    </tr>
</table>

Like I've told plenty of other people, you shouldn't be using divisions inside table cells.

This will achieve the exact same effect, without the divisions:

<table style="width: 100%; text-align: justify;">
    <tr>
        <td style="margin-right: 15px; background-color: gray;">
            Some text here
        </td>
        <td style="margin-right: 15px; background-color: gray;">
            column 2 text here
        </td>
        <td style="margin-right: 15px; background-color: gray;">
            Column 3 text here
        </td>
        <td style="background-color: gray;">
            Last column text here
        </td>
    </tr>
</table>

If you get rid of the divs and apply your styles and content directly to the table cells you will get the effect you want.

In case there is no special purpose of using div tag inside td. I would just do it without div. add style to td tag.

Mamu, I would suggest that you do not use inline style elements. Instead of styling your table tags it would be far more efficient, and better to add the the following between your <head> tags:

<style type="text/css">
table    {width:100%; text-align:justify;}
table td {margin-right:15px; background-color:gray;}
</style>

Using only those two lines of code you can apply the same elements consistently across your entire website. If you only wanted to apply them to some elements, you could create classes by adding a "." to a name of your choice:

<style type="text/css">
.MyTable    {width:100%; text-align:justify;}
.MyTable td {margin-right:15px; background-color:gray;}
</style>

And add the following to your HTML:

<table class="MyTable">

Note that class names are case sensitive. But this reusable code is far more efficient.

Furthermore, I would urge to consider the use of tables only if you are presenting tabular data. Tables load slower and are not SEO friendly. It would not be semantically correct to use them for layout. You should separate content from presentation whenever possible, and if it is layout you are after I would suggest using divs and other elements instead.