Set td width in table with table-layout: fixed

Question

As far I know the column widths are determined by the first row of the table. My problem is the first td in table has colspan set to '2'. Here is how my table looks like. Important thing is I can not change the HTML structure of table.

<table>
    <tbody>
        <tr>
            <td colspan="2"><strong>Personal Details</strong></td>
        </tr>
        <tr>
            <td>
                <ul>
                    <li>Title: </li>
                </ul>
            </td>
            <td>
                test
            </td>
        </tr>
        <tr>
            <td colspan="2"><strong>Personal Details</strong></td>
        </tr>
        <tr>
            <td>
                <ul>
                    <li>Title: </li>
                </ul>
            </td>
            <td>
                test
            </td>
        </tr>
        <tr>
            <td colspan="2"><strong>Personal Details</strong></td>
        </tr>
        <tr>
            <td>
                <ul>
                    <li>Title: </li>
                </ul>
            </td>
            <td>
                test
            </td>
        </tr>
        <tr>
            <td>
                <ul>
                    <li>Title: </li>
                </ul>
            </td>
            <td>
                test
            </td>
        </tr>
    </tbody>
</table>

CSS:

table {
    table-layout: fixed;
    width: 100%;
    word-wrap: break-word;
}

What I need is to set the width of td which contain <ul> element to 30%. So td colspan = '2' becomes some kind of header and the td elements below are split 30/70.

Answer 1

Take out table-layout: fixed; and add td:first-child { width: 30% } to your css.

http://jsfiddle.net/louis_feat/gcgk9y7e/

Answer 2

$('strong').parents('tr').addClass('header_td'); // jquery line code...

table {
    width: 100%;
    word-wrap: break-word;
}
table {   
    width: 100%;
    word-wrap: break-word;
    border: 2px solid black;
}
table tr:not(.header_td){
    background : red;
    color:white;
}
table tr:not(.header_td) td:first-child{
    max-width:30%; 
    width:30%;
    background:green;
}
table tr:not(.header_td) td{
    max-width:69%;  // 69% just only beacause some extra padding by element it self doesn't make chage t your structure.
    width:69%;
    background:black;
}
.header_td{
    background : grey;
}

<table>
    <tbody>
        <tr>
            <td colspan="2"><strong>Personal Details</strong></td>
        </tr>
        <tr>
            <td>
                <ul>
                    <li>Title: </li>
                </ul>
            </td>
            <td>
                test
            </td>
        </tr>
        <tr>
            <td colspan="2"><strong>Personal Details</strong></td>
        </tr>
        <tr>
            <td>
                <ul>
                    <li>Title: </li>
                </ul>
            </td>
            <td>
                test
            </td>
        </tr>
        <tr>
            <td colspan="2"><strong>Personal Details</strong></td>
        </tr>
        <tr>
            <td>
                <ul>
                    <li>Title: </li>
                </ul>
            </td>
            <td>
                test
            </td>
        </tr>
        <tr>
            <td>
                <ul>
                    <li>Title: </li>
                </ul>
            </td>
            <td>
                test
            </td>
        </tr>
    </tbody>
</table>

here i updated whole my answer with your new requirement please take a look here on it

Answer 3

You can achieve this by using some pseudo selectors, it won't work in IE 6, 7 and 8 though:

table {
    table-layout: initial;
    width: 100%;
    word-wrap: break-word;
}

tr:not(:first-child) td{
    width: 70%;
}

tr:not(:first-child) td:first-child {
    width: 30%;
}