HTML таблица, горизонтальная прокрутка, которая отслеживает заголовки и вертикальная прокрутка - проблема с шириной текста - PullRequest
Новая
       39

HTML таблица, горизонтальная прокрутка, которая отслеживает заголовки и вертикальная прокрутка - проблема с шириной текста

0 голосов
/ 23 февраля 2011

Хорошо, во-первых, извините, если вы узнаете некоторые из моих предыдущих постов сегодня.У меня есть фрагмент HTML-кода, который я написал, и который, по-видимому, был единственным способом сделать это.

  • Горизонтальная прокрутка, которая следует, поддерживает выравнивание текста по всему телу при перемещении тела.
  • Вертикальная прокруткакоторый все еще держит thead в поле зрения.

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

Я просто хочу, чтобы ширина столбца означала ширину столбца

РЕДАКТИРОВАТЬ: причина ширины 1200 состоит в том, что внутри переполненияdiv фактический размер 8x 150px 

    <script type='text/javascript'>
        function MatchScroll(SourceID, TargetID, DoIfMoz) {
                if (DoIfMoz || navigator.userAgent.indexOf("Firefox") == -1) document.getElementById(TargetID).scrollLeft = document.getElementById(SourceID).scrollLeft;
        }
    </script>

    <div id='HeaderTable'  style='width:883px;overflow:auto;overflow-y:hidden;overflow-x:hidden;'>
        <table border='1'   id='HeaderTable' style='width:1200px;float:left;table-layout:fixed;'>
            <thead style='text-align:left;'>
                <tr style='display:block;margin-left:1px;'>
                    <th width='150' style='width:150px;'>t</th>
                    <th width='150' style='width:150px;'>t</th>
                    <th width='150' style='width:150px;'>tt</th>
                    <th width='150' style='width:150px;'>t</th>
                    <th width='150' style='width:150px;'>t</th>
                    <th width='150' style='width:150px;'>ttttt</th>
                    <th width='150' style='width:150px;'>ttttt</th>
                    <th width='150' style='width:150px;'>tt</th>
                </tr>
            </thead>
        </table>
    </div>
    <div id='DataTable' style='height:300px;float:left;overflow:auto;overflow-x:auto;overflow-y:scroll;width:900px;'  onmouseup="MatchScroll('DataTable','HeaderTable', true);" onmousemove="MatchScroll('DataTable','HeaderTable', false);"     >
        <table border='1' style='width:1200px;float:left;table-layout:fixed;'>
            <tbody id='ClearDetails'>
                <tr id='Row0' style='color:black;height:auto;display:block;'>
                    <td style='width:150px;'>1</td>
                    <td style='width:150px;'>1</td>
                    <td style='width:150px;'>1</td>
                    <td style='width:150px;'>1</td>
                    <td style='width:150px;'>1111111111</td>
                    <td style='width:150px;'>1</td>
                    <td style='width:150px;'>1</td>
                    <td style='width:150px;'>1</td>
                </tr>
            </tbody>
        </table>
    </div>

Ответы [ 2 ]

0 голосов
/ 27 января 2013

Я не знаю, насколько велик весь ваш проект, но есть плагин jquery dataTable для решения этой проблемы.

В нем много вариантов работы с таблицами.Я предлагаю вам использовать файл "jquery.min", если вы просто хотите реализовать несколько опций.

0 голосов
/ 07 мая 2011

В CSS width: x указывает минимальную ширину, поэтому браузер может расширить столбец, чтобы он соответствовал тексту в теле таблицы, которое превышает его.

...