Сделать начало таблицы в той же строке, что и заголовок - PullRequest
1 голос
/ 01 мая 2010

Я пытаюсь, чтобы таблица значков отображалась в той же строке, что и заголовок.

В приведенном ниже HTML-коде значки отображаются в отдельной строке.

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

альтернативный текст http://img541.imageshack.us/img541/9677/tableu.png

<html>
<head>
<style type="text/css">
#action-icons
{
    float:right;
    position:relative;
    border:0;
}
</style>
</head>
<body>
    <h1 class="edit">Bla bla</h1>

    <table id="action-icons">
        <tbody>
            <tr>
                <td><img width="64" height="64"/></td>
                <td><img width="60" height="60"/></td>
            </tr>
            <tr>
                <td><img width="36" height="36"/></td>
                <td><img width="36" height="36"/></td>
            </tr>
        </tbody>
    </table>

    <table width="100%" class="tasksgrid">
        <tbody>
            <tr>
                <th class='taskcell'>One</th>
                <th class='taskcell'>Two</th>
            </tr>
        </tbody>
    </table>
</body>
</html>

Ответы [ 2 ]

1 голос
/ 03 мая 2010

Поместите div вокруг него:

<html>
<head>
<style type="text/css">
#action-icons
{
    float:right;
    position:relative;
    border:0;
}
.float_left {
       float:left;
}
</style>
</head>
<body>
    <div class="float_left">
        <h1 class="edit">Bla bla</h1>
    </div>

    <div class="float_left">
        <table id="action-icons">
            <tbody>
                <tr>
                    <td><img width="64" height="64"/></td>
                    <td><img width="60" height="60"/></td>
                </tr>
                <tr>
                    <td><img width="36" height="36"/></td>
                    <td><img width="36" height="36"/></td>
                </tr>
            </tbody>
        </table>
    </div>

    <div class="float_left">
        <table width="100%" class="tasksgrid">
            <tbody>
                <tr>
                    <th class='taskcell'>One</th>
                    <th class='taskcell'>Two</th>
                </tr>
            </tbody>
        </table>
    </div>
</body>
</html>
0 голосов
/ 01 мая 2010

Вы можете использовать тег <thead> для назначения значений в заголовке таблицы HTML. Пример: http://www.w3schools.com/tags/tag_thead.asp

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...