Проблема CSS с заголовком и отсутствующим правым пространством между таблицей и границей страницы - PullRequest
Новая
       9

Проблема CSS с заголовком и отсутствующим правым пространством между таблицей и границей страницы

3 голосов
/ 19 июля 2010

Я пишу простой веб-отчет с простым макетом для внутреннего использования.

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

Моя проблема в том, что когда таблица больше, чем область просмотра браузера, макет портится: заголовок широкий, как область просмотра, а не как страница body, поэтому при прокрутке вправо он выходит за пределы экрана, а справа граница таблицы прикреплена к правой стороне окна просмотра, хотя я и поле для тела.

HTML-код чистой тестовой страницы (количество элементов tr уменьшено для легкости): 

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
        <link type="text/css" rel="stylesheet" href="style.css">
        <title>Test page</title>
    </head>
    <body>
        <h1>
            Test page
        </h1>
        <div class="body" id="body">
            <p>
                This is a test page.</p>
            <table class="shiny_table">
                <thead>
                    <tr>
                        <th>
                            0
                        </th>
                        <th>
                            1
                        </th>
                        <th>
                            2
                        </th>
                        <th>
                            3
                        </th>
                        <th>
                            4
                        </th>
                        <th>
                            5
                        </th>
                        <th>
                            6
                        </th>
                        <th>
                            7
                        </th>
                        <th>
                            8
                        </th>
                        <th>
                            9
                        </th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>
                            0.9721986181295992
                        </td>
                        <td>
                            0.6041465194175369
                        </td>
                        <td>
                            0.5777094598685739
                        </td>
                        <td>
                            0.9741661116808004
                        </td>
                        <td>
                            0.8224265079662112
                        </td>
                        <td>
                            0.7236314528096713
                        </td>
                        <td>
                            0.24133248609797375
                        </td>
                        <td>
                            0.8836446393181888
                        </td>
                        <td>
                            0.02439762941899959
                        </td>
                        <td>
                            0.8171104825665716
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </body>
</html>

Содержимое style.css: 

* { font-family: Verdana, Arial, Sans Serif; font-size: 10pt; }
html, body { margin: 0pt; padding: 0pt; }
body { background-color: rgb(192, 255, 192); }
h1 { margin: 0pt; padding: 10pt; font-size: 20pt; background-color: rgb(192, 192, 255); text-align: center; text-transform: uppercase; }
.body { margin: 10pt; }
.shiny_table, .shiny_table th, .shiny_table td { border: solid 1pt rgb(192, 192, 192); border-collapse: collapse; }
.shiny_table th, .shiny_table td { padding: 5pt; }

Вот как это показано в Mozilla Firefox 3.6.6 (та же проблема возникает в Internet Explorer 8.0.6001.18702):

enter image description here

enter image description here

enter image description here

Как получить заголовок справа (фоновый цвет должен быть растянут вправо, пока текст центрирован в «первом» окне просмотра, оставался фиксированным, не двигаясь, другие красивые идеи), и чтобы правая граница таблицы находилась на расстоянии от граница страницы?

Заранее спасибо, Андреа.

Ответы [ 2 ]

2 голосов
/ 19 июля 2010

Что ж, для того, чтобы в таблице было свободное пространство слева, установите класс .body на это: 

.body {display: inline-block; padding: 10px;}

Чтобы ваш заголовок делал то, что вы хотите, сложнее. Если у вас фиксированная высота заголовка, то я предлагаю разместить этот цвет как часть фона тега body через изображение с repeat-x. Если это не фиксированная высота, то я не нашел решения для этого.

0 голосов
/ 19 июля 2010

Хорошо, так происходит пара вещей:

1) Сначала рассмотрите возможность переключения единиц на вашем css с точки на px или em. Очки отображаются в разных браузерах по-разному, поэтому вы не можете рассчитывать на то, что они будут иметь одинаковый размер.

2) Числа, которые вы отображаете, довольно большие. Не могли бы вы сократить десятичные точки через бэкэнд? Уменьшить размер шрифта? Ограничение данных вызывает сожаление, но это то, с чем нам, людям UI, часто приходится иметь дело. И неудивительно, что это то, к чему бизнесмены и маркетологи, кажется, не способны приспособиться.

3) Рассмотрим другой шаблон проектирования, такой как этот: http://datatables.net/examples/server_side/row_details.html или использование чего-либо, например Qtip (http://craigsworks.com/projects/qtip/), для отображения расширенных данных. В частности, таблицы данных позволяют выполнять отличную сортировку и поиск, которые ваши пользователи найдут неоценимым. Кроме того, он может скрыть столбцы, в которых все еще можно искать. Попробуйте зеленую кнопку «плюс» в приведенном выше примере.

4) Неявно установить ширину тд. Используйте CSS (лучший) или вставьте «стиль», если каждый из них должен быть различным. В крайнем случае установите для переполнения значение none.

...