HTML表格，每行中包含不同数量的单元格：如何在单元格中均匀分隔单元格？

Question

I have an HTML table where the number of columns may differ from one row to another. Nonetheless, I would like the columns to be evenly spaced in their row. (For instance, if my first row contains 2 columns, each column should have 50% of the total width of the table; if the second row has 3 columns, each of them should have ~33% of the total width of the table.)

Moreover, I would like the table to have the width of the container (so probably with a width: 100% in the CSS; but the problem is that this property tells the table to split the columns evenly based on what is in the forst row only). The container width may vary, this is why I have to use percentages.

I also tried to make my table myself with divs and by specifying the width of each "cell-div" with a percentage, but this solution doesn't provide a good result on every browser: sometimes, when there is no more space on the line, the last "cell-div" of a row goes under it. (I have to specify some weird width such as 49.99998% or 33.333233% because I need some space for my borders as well.)

Answer 1

Sounds like you're not really using the table element to display tabular data, just for some alignment. One way to get the result that you want is to make each row its own table and just set a width. Each row will evenly distribute the cells across the table width. You might need to add some more CSS formatting to get it to behave just the way you want.

You can see this at http://jsfiddle.net/RxSe5/1/ .

Answer 2

You can add tables inside each of the TD:

    <table style="width:100%;text-align:center;">
        <tr>
            <td>
                <table style="width:100%">
                    <tr>
                        <td>1</td>
                        <td>2</td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr>
            <td>
                <table style="width:100%">
                    <tr>
                        <td>1</td>
                        <td>2</td>
                        <td>3</td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
​

Or you can just add new tables:

<div>
    <table style="width:100%;text-align:center;">
        <tr>
            <td>1</td>
            <td>2</td>
        </tr>
    </table>
    <table style="width:100%;text-align:center;">
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
    </table>
    <table style="width:100%;text-align:center;">
        <tr>
            <td>1</td>
            <td>2</td>
        </tr>
    </table>
</div>​

Answer 3

you could totally nest tables, you could also use tables for layout. or you could use markup how it's supposed to be used and enjoy all the fruits of its labors (accessibility, semantics, usability, etc.) just by doing the right thing. you can can change column with via colspan="" attribute on you td elements. http://www.w3.org/TR/html-markup/td.html