Установка ширины столбца таблицы

Question

У меня есть простая таблица, которая используется для входящих сообщений:

<table border="1">
        <tr>
            <th>From</th>
            <th>Subject</th>
            <th>Date</th>
        </tr>

Как установить ширину, чтобы «От» и «Дата» составляли 15% ширины страницы, а «Тема» - 70%. Я также хочу, чтобы таблица занимала всю ширину страницы.

Answer 1

Вот еще один минимальный способ сделать это в CSS, который работает даже в старых браузерах, которые не поддерживают :nth-child и подобные селекторы: http://jsfiddle.net/3wZWt/.

HTML:

<table>
    <tr>
        <th>From</th>
        <th>Subject</th>
        <th>Date</th>
    </tr>
    <tr>
        <td>Dmitriy</td>
        <td>Learning CSS</td>
        <td>7/5/2014</td>
    </tr>
</table>

CSS:

table {
    border-collapse: collapse;
    width: 100%;
}

tr > * {
    border: 1px solid #000;
}

tr > th + th {
    width: 70%;
}

tr > th + th + th {
    width: 15%;
}

Answer 2

Добавьте colgroup после тега таблицы. Определите ширину и номер столбца здесь. и добавьте тег tbody. Поместите свой tr внутрь tbody.

<table>
    <colgroup>
       <col span="1" style="width: 30%;">
       <col span="1" style="width: 70%;">
    </colgroup>


    <tbody>
        <tr>
            <td>First column</td>
            <td>Second column</td>
        </tr>
    </tbody>
</table>

Answer 3

style="column-width:300px;white-space: normal;"