Как определяется ширина столбца в браузере?

Как определяется фактическая ширина столбцов в таблице? Ниже приведенный ниже код (в Chrome) выглядит следующим образом:

rendered table

Моя проблема заключается в том, что добавление в ячейку большего количества символов с помощью "ddd..." свободное пространство не используется, но содержимое других ячеек обернуто. Иногда возникает проблема, заключающаяся в том, что тексты "aaa..." и "ccc..." не будут перекрываться. Общий размер таблицы фиксирован, но все содержимое динамическое, поэтому фиксированный макет не является предпочтительным.
Обновление: несмотря на то, что текст меньше текста, чем любой из фактических столбцов, первая строка (c1-c4) имеет весьма существенный (возможный) эффект для окончательной компоновки.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">

<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <style type="text/css">
        body {background:#000; color:#fff; font-family:'Tahoma'; font-weight:600; }
        .container {width:670px; }
        table {font-family:'Tahoma'; font-weight:600; border-color: #ffffff; border-width:1px; }

.detail table{margin-left:20px; font-size:24px; width:650px;}
.detail table .operational {text-align:right;}
    </style>
</head>
<body>

<div class="detail">

   <table  border="1px" cellpadding="0px" cellspacing="0px" >
      <tbody>
        <!-- first row and borders only for debuging-->
        <tr>
            <td >c1</td>
            <td >c2</td>
            <td >c3</td>
            <td >c4</td>
        </tr>

        <tr >
            <td class="caption">Date</td>
            <td class="value">17.6.2013</td>
            <td class="operational" colspan="2">aaaaaaaaaaaaaaaaaaaaaaa</td>
        </tr>

        <tr >
            <td class="caption">bbbbbbbb</td>
            <td class="value" colspan="2">ccccccccccccccc ccc</td>
            <td class="operational">dddddddddddddd</td>
        </tr>

        <tr >
            <td class="caption">bbbbbb bbb</td>
            <td class="value" colspan="3">eeeeeeeeeeeeeeeeeeeeeeeeeeeee</td>
        </tr>

        <tr >
            <td class="caption">bbb bbbbbb</td>
            <td class="value" colspan="3">xxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxx</td>
        </tr>   
      </tbody>
    </table>
</div>

</body></html>

Ответы

Ответ 1

От http://www.w3.org/TR/CSS21/tables.html

Это еще не было преувеличено CSS3, но эта часть спецификации ненормативна, поэтому, вероятно, браузеры не соответствуют ей точно (нет нормативного определения этого поведения afaik).

Ширины столбцов определяются следующим образом:

  • Рассчитайте минимальную ширину содержимого (MCW) каждой ячейки: отформатированный содержимое может охватывать любое количество строк, но не может переполнять ячейку коробка. Если указанная "ширина" (W) ячейки больше MCW, W - минимальная ширина ячейки. Значение "auto" означает, что MCW является минимальная ширина ячейки. Также вычислите максимальную ширину ячейки каждой ячейки: форматирование содержимое без разрывов строк, кроме того, где явные разрывы строк происходят.
  • Для каждого столбца определите максимальную и минимальную ширину столбца из ячейки, которые охватывают только этот столбец. Минимальным является то, что требуется ячейка с наибольшей минимальной шириной ячейки (или шириной столбца) в зависимости от того, что больше). Максимум - это то, что требуется ячейке с наибольшая максимальная ширина ячейки (или ширина столбца), в зависимости от того, какая из них больше).
  • Для каждой ячейки, которая охватывает более одного столбца, увеличьте минимум ширины столбцов, которые он охватывает, так что вместе они, по крайней мере, как как ячейка. Сделайте то же самое для максимальной ширины. Если возможно, расширьте все натянутые столбцы примерно на ту же сумму.
  • Для каждого элемента группы столбцов с "шириной", отличной от "auto" , увеличить минимальную ширину столбцов, которые она охватывает, чтобы вместе они, по крайней мере, столь же широки, как и ширина столбца.

Это дает максимальную и минимальную ширину для каждого столбца.

Минимальная ширина заголовка (CAPMIN) определяется путем вычисления для каждая подпись имеет минимальную внешнюю ширину заголовка, как MCW гипотетическая ячейка таблицы, содержащая заголовок, отформатированный как "display: block". Наибольшая из минимальных внешних границ CAPMIN.

Ширина столбца и заголовка влияет на ширину финальной таблицы следующим образом:

  • Если свойство 'width' элемента 'table' или 'inline-table' имеет вычисленное значение (W), отличное от "auto" , используемая ширина больше W, CAPMIN и минимальную ширину, требуемую для всех столбцов плюс ячейку интервал или границы (MIN). Если используемая ширина больше MIN, дополнительная ширина должна быть распределена по столбцам.
  • Если "таблица" или Элемент "inline-table" имеет "width: auto", используемая ширина - больше таблицы, содержащей ширину блока, CAPMIN и MIN. Однако, если либо CAPMIN, либо максимальная ширина, требуемая столбцами плюс расстояние между ячейками или границы (MAX) меньше, чем расстояние между ячейками блок, используйте max (MAX, CAPMIN).

Процентное значение для ширины столбца относительно ширины таблицы. Если таблица имеет "width: auto", процент представляет собой ограничение на ширине столбца, которую UA должен попытаться удовлетворить. (Очевидно, это не всегда возможно: если ширина столбца равна "110%", ограничение не может быть выполнено.)

Ответ 2

Таблицы являются "текучими" по своему размеру. Это означает, что вы можете указать размер, но, если для содержимого требуется больше места, тогда таблица увеличит размер до требуемого.

Вы указали:

.detail table{margin-left:20px; font-size:24px; width:650px;}

Это можно рассматривать как минимальную ширину для таблицы.