Установить горизонтальную прокрутку для тэга PRE - HTML и CSS

newerow1989 · 18.05.2025, 10:55

Здравствуйте!

Как установить горизонтальную прокрутку для тэга <PRE> внутри ячейки таблицы?

Код:

<style>
pre{
   background-color: yellow;
   color: blue;
   overflow-x: auto;
}
.menu{
   background-color: #AAFFAA;
   border: lime 2px solid;
   border-radius: 10px;
   padding: 10px;
   width: 20%;
}
.info{
   background-color: #DDDDFF;
   border: #8888FF 2px solid;
   border-radius: 10px;
   padding: 10px;
   width: 80%;
}
</style>

<table border="0" width="100%">
   <tr>
      <td class="menu">
         Левая часть страницы (обычно предназначено для меню)
      </td>
      <td class="info">
         Правая часть страницы
<pre>6523652323523541369829625622653684654235426354687232536263 + 9413983543685263162354967467534953745376453764257642734523 + 15937635867208804532184593090188638399611880118944875270786
function MessageBeep; external user32 name 'MessageBeep'; function MessageBox; external user32 name 'MessageBoxA'; function MessageBoxA; external user32 name 'MessageBoxA'; function MessageBoxW; external user32 name 'MessageBoxW'; function MessageBoxEx; external user32 name 'MessageBoxExA'; function MessageBoxExA; external user32 name 'MessageBoxExA'; function MessageBoxExW; external user32 name 'MessageBoxExW';</pre>
      </td>
   </tr>
</table>

<pre>6523652323523541369829625622653684654235426354687232536263 + 9413983543685263162354967467534953745376453764257642734523 + 15937635867208804532184593090188638399611880118944875270786
function MessageBeep; external user32 name 'MessageBeep'; function MessageBox; external user32 name 'MessageBoxA'; function MessageBoxA; external user32 name 'MessageBoxA'; function MessageBoxW; external user32 name 'MessageBoxW'; function MessageBoxEx; external user32 name 'MessageBoxExA'; function MessageBoxExA; external user32 name 'MessageBoxExA'; function MessageBoxExW; external user32 name 'MessageBoxExW';</pre>

Arigato · 18.05.2025, 13:17

Код:

<!DOCTYPE html>
<html>
<head>
<style>
#container{
	display: flex;
}
#menu{
   background-color: #AAFFAA;
   border: lime 2px solid;
   border-radius: 10px;
   padding: 10px;
   margin-right: 1px;
   width: 20%;
}
#info{
   background-color: #DDDDFF;
   border: #8888FF 2px solid;
   border-radius: 10px;
   padding: 10px;
   margin-left: 1px;
   width: 80%;
}
pre{
   background-color: yellow;
   color: blue;
   overflow-x: auto;
}
</style>
</head>
<body>
<div id="container">
    <div id="menu">
       Левая часть страницы (обычно предназначено для меню)
    </div>
    <div id="info">
       Правая часть страницы
<pre>6523652323523541369829625622653684654235426354687232536263 + 9413983543685263162354967467534953745376453764257642734523 + 15937635867208804532184593090188638399611880118944875270786
function MessageBeep; external user32 name 'MessageBeep'; function MessageBox; external user32 name 'MessageBoxA'; function MessageBoxA; external user32 name 'MessageBoxA'; function MessageBoxW; external user32 name 'MessageBoxW'; function MessageBoxEx; external user32 name 'MessageBoxExA'; function MessageBoxExA; external user32 name 'MessageBoxExA'; function MessageBoxExW; external user32 name 'MessageBoxExW';</pre>
    </div>
</div>

<pre>6523652323523541369829625622653684654235426354687232536263 + 9413983543685263162354967467534953745376453764257642734523 + 15937635867208804532184593090188638399611880118944875270786
function MessageBeep; external user32 name 'MessageBeep'; function MessageBox; external user32 name 'MessageBoxA'; function MessageBoxA; external user32 name 'MessageBoxA'; function MessageBoxW; external user32 name 'MessageBoxW'; function MessageBoxEx; external user32 name 'MessageBoxExA'; function MessageBoxExA; external user32 name 'MessageBoxExA'; function MessageBoxExW; external user32 name 'MessageBoxExW';</pre>
</body>
</html>

newerow1989 · 18.05.2025, 16:38

Нет, не сойдет! Мне нужно внутри ячейки таблицы.

Arigato · 18.05.2025, 21:31

Цитата:

Сообщение от newerow1989

Мне нужно внутри ячейки таблицы.

Использование таблиц для верстки считается плохим тоном.

uberchel · 25.05.2025, 15:17

Цитата:

Сообщение от newerow1989

Нет, не сойдет! Мне нужно внутри ячейки таблицы.

Ну если очень надо:

Код:

.menu{
   background-color: #AAFFAA;
   border: lime 2px solid;
   border-radius: 10px;
   padding: 10px;
   width: 20vw;
}
.info{
   background-color: #DDDDFF;
   border: #8888FF 2px solid;
   border-radius: 10px;
   padding: 10px;
   width: 80vw;
   max-width: 80vw;
}

А вообще, для верстки, не для вывода каких то данных, нужно смотреть в сторону flex or grid

18.05.2025, 16:38	#3
newerow1989 Я самый любопытный Участник клуба Регистрация: 24.07.2012 Сообщений: 1,984	Нет, не сойдет! Мне нужно внутри ячейки таблицы. С запрограммированным приветом, Неверов Евгений! Сайт: http://newerow1989.ru [Паскаль] [Delphi]

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
есть файл goods.xml как скопировать значение тэга <a></a> перед последующим значением тэга <></> для каждого различного значения тэга <a></a> ?	vitalyoleg	Windows	9	30.04.2019 16:16
расширенный синтаксис тэга style	АлексейД	HTML и CSS	5	13.09.2017 20:05
Пустое значение у тэга XML	exivmaks	C# (си шарп)	4	11.03.2015 16:41
Использование IETab внутри тэга iframe	lildare	JavaScript, Ajax	0	23.09.2012 15:08
Для сайта на юкозе горизонтальную алфавитку	cusha	Фриланс	0	25.03.2011 22:13