как растянуть / выровнять элементы подряд? - PullRequest
Новая
       1

как растянуть / выровнять элементы подряд?

1 голос
/ 10 марта 2012

У меня два ряда, в 1-м ряду есть вещи, которые определяют ширину ряда; Во втором ряду у меня есть пара групп элементов, которые должны содержать два элемента рядом. Я хочу сделать четные пробелы между этими группами элементов во 2-м ряду. Они должны растягиваться по всей клетке и занимать всю ее ширину. Не могли бы вы посоветовать, что мне делать?

Код выглядит так: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<body>
<table  border="1">
<tr>
    <td width="200">
        text
    </td>
    <td width="200">
        text
    </td>
    <td width="200">
        text
    </td>
    <td width="200">
        text
    </td>
    <td width="200">
        text
    </td>
</tr>
    <tr>
<td colspan="5" align="justify">
    <!-- group1 -->
    <select class="sorter" >
    </select>
    <select class="dir" >
    </select>

    <!-- group2 -->
    <select class="sorter" >
    </select>
    <select class="dir" >
    </select>

    <!-- group3 -->
    <select class="sorter" >
    </select>
    <select class="dir" >
    </select>

    <!-- group4 -->
    <select class="sorter" >
    </select>
    <select class="dir" >
    </select>
</td>
</tr>
</table>
</body>
</html>

РЕДАКТИРОВАТЬ: Пока я сделал это, и почти получил это. Но пробелы между первой и последней группами не равны. Есть идеи? 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <style>
                table.ball {empty-cells: show}
                table.ball td {text-align:center;border:1px solid blue;}
                table.ball td:nth-last-of-type(1) {text-align:right; } 
                table.ball td:nth-of-type(1) {text-align:left;} 
                select.sorter {width:180px}
        </style>
    </head>
<body>
<table  >
<tr>
    <td width="200">
        text
    </td>
    <td width="200">
        text
    </td>
    <td width="200">
        text
    </td>
    <td width="200">
        text
    </td>
    <td width="200">
        text
    </td>
</tr>
    <tr>
<td colspan="5" align="middle" >
    <table class="ball" width="100%" >
        <colgroup>

        </colgroup>
        <tr>
            <td>
                <!-- group1 -->
                <select class="sorter" >
                </select>
                <select class="dir" >
                </select>
            </td>

            <td>
                <!-- group1 -->
                <select class="sorter" >
                </select>
                <select class="dir" >
                </select>
            </td>

            <td>
                <!-- group1 -->
                <select class="sorter" >
                </select>
                <select class="dir" >
                </select>
            </td>

            <td>
                <!-- group1 -->
                <select class="sorter" >
                </select>
                <select class="dir" >
                </select>
            </td>
        </tr>
    </table>
</td>
</tr>
</table>
</body>
</html>

Ответы [ 3 ]

1 голос
/ 10 марта 2012

Может быть этот пример близок к тому, что вам нужно. Я удалил некоторые из ваших жестко закодированных данных и поместил их в css. 

table {table-layout: fixed; border-collapse: collapse;}
td {width: 200px; border: 1px solid black;}
.sorter, .dir {width: 11.5%;} 
td[colspan="5"] {text-align: center;}
Ширина

11,5%, казалось, работала хорошо, хотя математически казалось, что она должна быть ближе к 12,5%, но элементы select делали что-то необычное, имея дополнительное пространство справа. Тем не менее, text-align: center хорошо держит их равномерно.

0 голосов
/ 10 марта 2012

Вот обновленный код - Вот скрипка http://jsfiddle.net/n2zEv/embedded/result/

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <style>
                table.ball {empty-cells: show}
                table.ball td {text-align:center;/*border:1px solid blue;*/}
                table.ball td:nth-last-of-type(1) {text-align:right; } 
                table.ball td:nth-of-type(1) {text-align:left;} 
                select.sorter, select.dir {width:48.5%;}
        </style>
    </head>
<body>
<table border="1" width="100%" cellpadding="0" cellspacing="0">
<tr>
    <td width="200">text</td>
    <td width="200">text</td>
    <td width="200">text</td>
    <td width="200">text</td>
    <td width="200">text</td>
</tr>
    <tr>
<td colspan="5" align="middle" >
    <table class="ball" width="100%" cellpadding="0" cellspacing="0">
        <colgroup></colgroup>
        <tr>
            <td>
                <!-- group1 -->
                <select class="sorter"></select>
                <select class="dir"></select>
            </td>
            <td>
                <!-- group2 -->
                <select class="sorter"></select>
                <select class="dir"></select>
            </td>
            <td>
                <!-- group3 -->
                <select class="sorter"></select>
                <select class="dir"></select>
            </td>
            <td>
                <!-- group4 -->
                <select class="sorter"></select>
                <select class="dir"></select>
            </td>
        </tr>
    </table>
</td>
</tr>
</table>
</body>
</html>
0 голосов
/ 10 марта 2012

Проверьте разметку, я добавил div с class = "group" для каждой группы во втором ряду. Вместо добавления таблиц в таблицу, вы можете добавить такие div'ы, как этот. 

 <tr>
        <td colspan="5" align="justify">
            <!-- group1 -->
          <div class="group">  
            <select class="sorter" >
            </select>
            <select class="dir" >
            </select>
          </div>
          <div class="group">
            <!-- group2 -->
            <select class="sorter" >
            </select>
            <select class="dir" >
            </select>
        </div>
        <div class="group">
            <!-- group3 -->
            <select class="sorter" >
            </select>
            <select class="dir" >
            </select>
        </div>
        <div class="group">
            <!-- group4 -->
            <select class="sorter" >
            </select>
            <select class="dir" >
            </select>
          </div>
        </td>
        </tr>

и в css: 

.group{
width:25%;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...