Ячейки таблицы с одинаковыми полями без скриптов

[hachik]

Доброго времени суток, уважаемые!

Никак не могу решить такую задачу: нужно сделать "резиновый" ряд "кнопок"

Суммарная ширина ряда - 100% от родителя.

Ширина каждой "кнопки" = ширина текста в ней + ОДИНАКОВЫЕ ВО ВСЕХ КНОПКАХ поля.

при растягиваии "родителя" размер всех кнопок тоже меняется НА ОДИНАКОВУЮ ВЕЛИЧИНУ

хоть дивами, хоть таблицей, но без скриптов желательно

 

вот так должно быть:

Edited October 23, 2014 by hachik

[Switch74]

а вы сами не можете сделать таблицами?

[hachik]

а вы сами не можете сделать таблицами?

не могу (

мог бы - не писал бы ))

все уже поперепробовал

 

на первый взгляд кажется, что нет проблемы, а она есть.

как суслик из ДМБ...

Edited October 23, 2014 by hachik

[Switch74]

ну так что у вас уже сделано?

[hachik]

ну так что у вас уже сделано?

    

с десяток вариантов, ни один из которыхз не дает нужного результата:

 

 

<table style='border:1px solid green; width:700px;'>

<tr>

<td style='border:1px solid red; text-align:center; padding:10px;'> <div style='position:absolute; width:1px overflow:auto; border:1px solid blue; display:inline; '>которко</div></td>

<td style='border:1px solid red; text-align:center; padding:10px;'> <div style='position:absolute; width:1px overflow:auto; border:1px solid blue; display:inline;'>очень-очень длинный текст</div></td>

</tr>

</table>

<br /><br />

<table style='border:1px solid green; width:700px;'>

<tr>

<td style='border:1px solid red; text-align:center; padding:10px;'>которко</td>

<td style='border:1px solid red; text-align:center; padding:10px;'>очень-очень длинный текст</td>

</tr>

</table>

<br /><br />

<table style='border:1px solid green; width:700px;'>

<tr>

<td style='border:1px solid red; text-align:center;'>которко</td>

<td style='border:1px solid red; text-align:center;'>очень-очень длинный текст</td>

</tr>

</table>

<br /><br />

<table style='border:1px solid green; width:700px; table-layout:fixed'>

<tr>

<td style='border:1px solid red; text-align:center; padding:10px;'>которко</td>

<td style='border:1px solid red; text-align:center; padding:10px;'>очень-очень длинный текст</td>

</tr>

</table>

<br /><br />

<table style='border:1px solid green; width:700px; table-layout:fixed'>

<tr>

<td style='border:1px solid red; text-align:center;'>которко</td>

<td style='border:1px solid red; text-align:center;'>очень-очень длинный текст</td>

</tr>

</table>

<br /><br />

<table style='border:1px solid green; width:700px;'>

<tr>

<td style='border:1px solid red; text-align:center; width:1px;'>которко</td>

<td style='border:1px solid red; text-align:center; width:1px;'>очень-очень длинный текст</td>

</tr>

</table>

<br /><br />

<table style='border:1px solid green; width:700px;'>

<tr>

<td style='border:1px solid red; text-align:center; width:1px; padding:auto;'>которко</td>

<td style='border:1px solid red; text-align:center; width:1px; padding:auto;'>очень-очень длинный текст</td>

</tr>

</table>

<br /><br />

<table style='border:1px solid green; width:700px;'>

<tr>

<td style='border:1px solid red; text-align:center; width:1px; padding:auto;'><div style='width:1px; white-space:nowrap'>которко</div></td>

<td style='border:1px solid red; text-align:center; width:1px; padding:auto;'><div style='width:1px; white-space:nowrap'>очень-очень длинный текст</div></td>

</tr>

</table>

<br /><br />

<table style='border:1px solid green; width:700px;'>

<tr>

<td style='border:1px solid red; text-align:center; width:1px; padding:auto;'><div>которко</div></td>

<td style='border:1px solid red; text-align:center; width:1px; padding:auto;'><div>очень-очень длинный текст</div></td>

</tr>

</table>

<br /><br />

<table style='border:1px solid green; width:700px;'>

<tr>

<td style='border:1px solid red; text-align:center; width:1px; padding:auto;'><div style='position:relative'>которко</div></td>

<td style='border:1px solid red; text-align:center; width:1px; padding:auto;'><div style='position:relative'>очень-очень длинный текст</div></td>

</tr>

</table>

<br /><br />

<table style='border:1px solid green; width:700px;'>

<tr>

<td style='border:1px solid red; text-align:center;'>

<table style='border:1px solid lime; width:100%; '>

<tr>

<td> </td>

<td>которко</td>

<td> </td>

</tr>

</table>

</td>

<td style='border:1px solid red; text-align:center;'>

<table style='border:1px solid lime; width:100%;'>

<tr>

<td> </td>

<td style='white-space:nowrap; width:1px;'>очень-очень длинный текст</td>

<td> </td>

</tr>

</table>

</td>

</tr>

</table>

<br /><br />

<table style='border:1px solid green; width:700px;'>

<tr>

<td style='border:1px solid red; text-align:center; padding:10px;'><div style='white-space:nowrap; margin:0 auto;'>которко</div></td>

<td style='border:1px solid red; text-align:center; padding:10px;'><div style='white-space:nowrap; margin:0 auto;'>очень-очень длинный текст</div></td>

</tr>

</table>

<br /><br />

<table style='border:1px solid green; width:700px;'>

<tr>

<td style='border:1px solid red; text-align:center;'><div style='border:1px solid blue; position:absolute;'>1</div><div style='white-space:nowrap; width:1px;'>которко</div><div style='border:1px solid blue;'>1</div></td>

<td style='border:1px solid red; text-align:center;'><div style='border:1px solid blue; position:absolute;'>2</div><div style='white-space:nowrap; width:1px;'>очень-очень длинный текст</div><div style='border:1px solid blue;'>2</div></td>

</tr>

</table>

Edited October 23, 2014 by hachik

[pangurban]

Так?

Edited October 23, 2014 by pangurban

[Switch74]

1. Было бы не плохо запихнуть это в песочницу

2. чем вам не устроил такой вариант http://jsfiddle.net/umy9eo7g/ ?

 

3. Мой вариант http://jsfiddle.net/vrn0y1kr/1/

Edited October 23, 2014 by Switch74

[hachik]

1. Было бы не плохо запихнуть это в песочницу

2. чем вам не устроил такой вариант http://jsfiddle.net/umy9eo7g/ ?

 

3. Мой вариант http://jsfiddle.net/vrn0y1kr/1/

2) поля разные, в чем собсна, и состоял вопрос

3) это те же, яйца таблицы, только в профиль div-ами ))

Так?

 

 

нет )

у "long item"  поля больше, а нужно, чтобы везде одинаково было

 

 

может, я непонятно изгалаю, в чем проблема?

<table width="100%">

  <tr>

    <td>мало</td>

    <td>много-много-много-текста</td>

  </tr>

</table>

при такой верстке ПОЛЯ ЯЧЕЕК ПОЛУЧАЮТСЯ РАЗНЫМИ, пропорционально кол-ву текста в ячейке, а нужно именно ПОЛЯ (padding) ОДИНАКОВОЙ ШИРИНЫ

Edited October 23, 2014 by hachik

[pangurban]

Да пожалуйста

[Switch74]

Да пожалуйста

 

думаете?

http://jsfiddle.net/xogq0q2o/5/

 

 

в кратце:

1. поля в % - зависят от размера кнопки, т.е. чем больше размер текста тем больше этот процент, как следствие у кнопок с большим текстом больше отступы.

2. отступ в px - вам придется рассчитывать эту цифру учитывая большое количество факторов, что может привести к дробным числам, а они обрабатываются разными браузерами по разному, так же шрифты могут по разному обрабатываться ими.

 

вас не устроют ни динамические ни статические единицы измерения

Edited October 23, 2014 by Switch74

[pangurban]

думаете? http://jsfiddle.net/xogq0q2o/5/

 

Эх, раскусил

[hachik]

в кратце:

1. поля в % - зависят от размера кнопки, т.е. чем больше размер текста тем больше этот процент, как следствие у кнопок с большим текстом больше отступы.

2. отступ в px - вам придется рассчитывать эту цифру учитывая большое количество факторов, что может привести к дробным числам, а они обрабатываются разными браузерами по разному, так же шрифты могут по разному обрабатываться ими.

 

вас не устроют ни динамические ни статические единицы измерения

 

ну т.е. все, не будет мне щастья?

[Switch74]

Без скриптов с расчетом отступов в px мне кажется нет

по сути у вас формула (ширина_контейнера - (ширина_кнопки_1+ширина_кнопки_2))/4

 

больше кнопок больше делитель и в CSS я даже не представляю как это все через calc сделать

Edited October 23, 2014 by Switch74

[hachik]

Без скриптов с расчетом отступов в px мне кажется нет

очень плохо....

задача вроде бы должна переодически возникать

сам не первый раз натыкаюсь на такую необходимость

[hachik]

В любом случае большое спасибо за уделенное время

[Bassline]

Может так? http://jsfiddle.net/vrn0y1kr/2/

[hachik]

Может так? http://jsfiddle.net/vrn0y1kr/2/

Хм... вариант ))))

"Фишка" в "width:1000px" я так понимаю ? (вопрос, наверное, риторический)

Прикольно. Работает. Буду юзать пока так

 

Спасибо большое!

[Bassline]

http://xiper.net/collect/html-and-css-tricks/navigation/rubber-blocks-menu

[hachik]

http://xiper.net/collect/html-and-css-tricks/navigation/rubber-blocks-menu

Ну все перелопатил, а этого не нашел.

Плохой из меня сыщег

[webmax7]

вариант с table-layout:fixed; пробовали? http://jsfiddle.net/vrn0y1kr/8/