HTML-ячейка, содержащая полосы прокрутки css — как я могу избавиться от заполнения?
-
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....но, конечно, вы лучше всех знаете свои потребности.