How to make table's width fixed

Question

I have two tables inside a table :

    <table>
        <tbody>
            <tr>
                <td class="tdkqtb">
                    <table border="1">
                        <tbody>
                            <tr>
                                <th>Giải</th>
                                <th>@cityID</th>
                            </tr>
                        </tbody>
                    </table>
                </td>

                <td class="tdkqtb">
                    <table border="1">
                        <tbody>
                            <tr>
                                <th>Đầu</th>
                                <th>Đuôi</th>
                            </tr>
                        </tbody>
                    </table>
                </td>
            </tr>
            <tr></tr>
        </tbody>

    </table>

Now I need to set the width of the two tables fixed. How can I do that? For example I want all tables to have the same width as the first twos. I mean they must have a fixed width for each column, the first table will contains 70% width of the parent table, and the second contains the rest. The columns in the two tables must have fixed width too!

Answer 1

First of all, why not going Tableless?

Then you have to put some CSS into it, like DasBoot said, to give a full table a width you should do this:

table {
    width: 70%;
}

The same thing for specific td, tr, th or whatever element you want to style. If what you are going for is a maximum width or a minimum width you can use max-width and min-width appropriately. Why not put this code on a jsfiddle and test the results live to see what you need to do?

Regards.

Answer 2

Not sure if I understood what you want but you can just select the required element of the table or the whole table and give a width in css

table {
    width: 70%;
}

If you have multiple tables, give them ids or classes to seperate for different styles. Same for the th, tr, td and so on.