HTML-ячейка, содержащая полосы прокрутки css — как я могу избавиться от заполнения?

StackOverflow https://stackoverflow.com/questions/2103629

  •  21-09-2019
  •  | 
  •  

Вопрос

У меня есть HTML-таблица, где каждая ячейка содержит большой объем данных.Я бы хотел, чтобы каждая ячейка была прокручиваемой по отдельности (что-то вроде "панелей"), поэтому я создал класс CSS, который включает атрибут overflow: scroll .Однако ширина не одинакова для каждого раза, когда я использую класс CSS.Это вызывает проблему с заполнением ячеек.Когда ширина определена во внешней таблице стилей (что у меня не работает, поскольку мне нужно иметь возможность устанавливать разную ширину), "панель" заполняет всю ячейку, но когда я определяю ее на уровне ячейки, вокруг "панели" внутри ячейки появляется отступ.

Вот определение класса:

.imitationPane{
    display: block;
    border-width: 1px;
    border-style: solid;
    border-color: 000;
    margin-top: 5px;
    padding:5px;
    height: 200px;
    overflow: scroll
 }

Вот HTML-код:

<table cellpadding=0 cellspacing=2 border=1 width=720>
    <tr>
        <td align=left>
            <span class="imitationPane">
    Hello World bjkgkgdtfdfhbvufgfckjgetdkhgytffkgughkhyufrdyufukg<br><br><br>
            </span>
        </td>
        <td align=left>
            <span class="imitationPane">
    Hello World bjkgkgdtfdfhbvufgfckjgetdkhgytffkgughkhyufrdyufukg<br><br><br>
<h1>AGAIN</h1>
            </span>
        </td>
    </tr>
    <tr>
        <td align=left>
            <span class="imitationPane">
    Hello World bjkgkgdtfdfhbvufgfckjgetdkhgytffkgughkhyufrdyufukg<br><br><br>
<h1>CELL 3</h1>
            </span>
        </td>
        <td align=left>
            <span class="imitationPane">
    Hello World bjkgkgdtfdfhbvufgfckjgetdkhgytffkgughkhyufrdyufukg<br><br><br>
<h1>CELL 4</h1>
            </span>
        </td>
    </tr>
</table>
Это было полезно?

Решение

Я решил эту проблему через несколько минут после публикации, хотя работал над ней несколько часов.Фактическая проблема заключалась в том, что когда ширина таблицы была больше суммы ширин каждой отдельной ячейки (или охватываемой области), появлялось заполнение ячейки.Так совпало, что я пробовал использовать только большие числа во внешней таблице стилей и маленькие - в самом коде, поэтому оказалось, что проблема была вызвана тем, где находились данные, а не тем, что это были за данные

Другие советы

Хорошо, чтобы добавить что-то к этому, при быстром просмотре может иметь больше смысла применить свойство scroll к таблицам td вместо тегов span.Логично, что тогда, когда содержимое ячейки превышает заданные размеры, она переполняется, и вы запрашиваете, чтобы переполнение отображалось в виде прокрутки....атрибуты, которые вы определяете в своем CSS, кажутся более подходящими для элементов таблицы, а не для span....но, конечно, вы лучше всех знаете свои потребности.

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top