CSS: установить одинаковую ширину для двух столбцов таблицы из трех столбцов

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

Пример:

+----+----+--------------+
|  A |  B |      C       |
+----+----+--------------+
|1234|  12|           foo|
+----+----+--------------+
|   a|   b|           bar|
+----+----+--------------+

Обратите внимание, что B имеет ширину 4 символа, хотя его содержимое умещается в столбец из 2 символов.

Жесткое определение ширины столбцов A и B не является решением, поскольку размер содержимого различается.


html css tabular width
person Jonas H.    schedule 13.04.2012    source источник
comment
Некоторый код, который вы пробовали, был бы хорош   -  person Brad Fox    schedule 13.04.2012

Ответы (2)


arrow_upward
0
arrow_downward

заставит первые два столбца быть как можно меньше http://jsfiddle.net/DYeyp/

​<table border=1 style='width:100%;'>
​<tr>
 ​   <td style='width:1%;'>1111</td>
  ​  <td style='width:1%;'>1111</td>
  ​  <td>1</td>
​</tr>
​<tr>
 ​   <td>1</td>
  ​  <td>1</td>
  ​  <td>1</td>
​</tr>
​<tr>
 ​   <td>1</td>
  ​  <td>1</td>
  ​  <td>1</td>
​</tr>
​</table>​​​​​​​​​​​
person squarephoenix    schedule 13.04.2012
comment
Это работает только в том случае, если ширина содержимого превышает ширину определенного процента. - person laymanje; 14.04.2012
comment
какие? нет возможности, чтобы он не превышал 1% ширины - person squarephoenix; 14.04.2012
comment
Взгляните на этот jsfiddle jsfiddle.net/zJBRr, они имеют одинаковую ширину, только если содержимое одинаково ширина. - person laymanje; 14.04.2012
comment
о, обе колонки должны быть одинаковой ширины, хорошо, одну секунду - person squarephoenix; 14.04.2012

arrow_upward
0
arrow_downward

Я не думаю, что это возможно только с css, вероятно, это возможно с javascript, но это никогда не бывает хорошим вариантом. Есть способ сделать это, он не очень красивый, но он может сработать: если вы используете php для заполнения таблицы данными, вы можете сделать невидимый div во второй строке, который имеет те же данные, что и первая строка. Например:

<div class="NoSelect" style="display: inline-block; height: 1px; overflow: hidden;">
--echo here the same data as in the first row--
</div>

И чтобы сделать текст внутри недоступным для выбора, вы можете добавить:

<style type="text/css">
    .NoSelect {
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        -o-user-select: none;
        user-select: none;
        cursor: default;
    }
</style>
<script language="javascript" type="text/javascript">
    jQuery.fn.extend({ 
        disableSelection : function() {
            return this.each(function() {
                this.onselectstart = function() { return false; };
                this.unselectable = 'on';
            });
        }
    });
    $(document).ready(function() {
        $('.NoSelect').disableSelection();
    }
</script>
person Edward A    schedule 13.04.2012