Ширина столбца таблицы HTML: объединение фиксированной и переменной ширины - PullRequest
Новая
       12

Ширина столбца таблицы HTML: объединение фиксированной и переменной ширины

9 голосов
/ 19 ноября 2011

Я сделал такую ​​таблицу: 

<table style="width:1000px;">
  <tr>
    <td>aaa</td>
    <td id="space"></td>
    <td class="fixed-width">bbb</td>
    <td class="fixed-width">ccc</td>
  </tr>
</table>

Как бы я сделал CSS, чтобы столбцы b и c имели фиксированную ширину, а столбец занимал столько места, сколько нужно,и столбец пробела, чтобы расширить, чтобы заполнить остальную часть таблицы?

1 Ответ

4 голосов
/ 21 ноября 2011

Я не гуру CSS, но это просто не правильно, что не было бы никакого способа сделать это. Это похоже на работу в Firefox и IE7. Я не проверял другие браузеры.

Для первого сжимаемого по размеру

задано (с использованием CSS) значение ширины 0, поэтому оно сжимается по размеру содержимого.

Второе пространство

установлено (с использованием CSS) на ширину больше, чем уместится в таблице.

Ширина двух последних фиксированной ширины

s не соответствует . Вместо этого он установлен в стиле . Это вызывает ширину столбца. 
<!DOCTYPE html>
<html>
    <head>
        <title>cols</title>
        <style type="text/css">
            td.fixed-width {
                width: 100px;
                background-color:aqua
            }
            td.min-width {background-color:aqua}
            td.space {border: thick blue solid}
        </style>
    </head>
    <body style="width:1100px; font-family:sans-serif">
        <table style="width:1000px;">
            <col style="width:0"/>
            <col style="width:1000px"/>
            <col span="2" />
            <tr>
                <td class="min-width">aaa</td>
                <td class="space"></td>
                <td class="fixed-width">bbb</td>
                <td class="fixed-width">ccc</td>
            </tr>
            <tr>
                <td class="min-width">aaa asdfasdf asdfsad</td>
                <td class="space"></td>
                <td class="fixed-width">bbb fasdas</td>
                <td class="fixed-width">ccc vdafgf asdf adfa a af</td>
            </tr>
        </table>
    </body>
</html>
...