5 способов увеличить ширину ячеек в Jupyter Notebook: секреты

from IPython.display import display, HTML
display(HTML("<style>.container { width:95% !important; }</style>"))

display(HTML("<style>.container { width:1200px !important; }</style>"))

display(HTML("<style>.output_area { width:1500px; overflow-x: auto; }</style>"))

display(HTML("""
<style>
.container { width:90% !important; }
.output_area { width:100%; overflow-x: auto; }
div.output_html { width:100%; }
</style>
"""))

%%html
<style>
@media print {
.container { width: 1200px !important; }
.output_area img { max-width: 100% !important; }
}
</style>

/* Увеличение ширины основного контейнера */
.container {
width: 95% !important;
min-width: 1200px !important;
}

/* Настройка области вывода */
.output_area {
max-width: 100%;
overflow-x: auto;
}

/* Улучшение отображения таблиц pandas */
div.output_html {
width: 100%;
}

/* Настройка для изображений и графиков */
.output_png img {
max-width: 100% !important;
}

/* Адаптивная ширина для разных экранов */
@media (min-width: 1200px) {
.container {
width: 90% !important;
}
}

@media (min-width: 1600px) {
.container {
width: 85% !important;
}
}

/* Настройка для режима презентации */
.reveal .container {
width: 100% !important;
max-width: 1400px;
}

c = get_config()
c.NotebookApp.iopub_data_rate_limit = 1e10 # Увеличение лимита на размер данных

import pandas as pd
pd.set_option('display.max_columns', None) # Показывать все колонки
pd.set_option('display.max_rows', 100) # Ограничить число строк
pd.set_option('display.width', 1000) # Максимальная ширина вывода

from IPython.display import display, HTML

def set_notebook_width(width_percentage=95):
"""Установка ширины notebook в процентах от окна браузера"""
css = f"""
<style>
.container {{ width:{width_percentage}% !important; }}
.output_area {{ width:100%; overflow-x: auto; }}
</style>
"""
display(HTML(css))

# Пример использования
set_notebook_width(90)

def configure_notebook(container_width='95%', max_columns=None, max_rows=100, 
table_width=None, figure_size=(12, 8)):
"""
Комплексная настройка отображения notebook и данных

Параметры:
-----------
container_width : str
Ширина контейнера notebook (в пикселях или процентах)
max_columns : int или None
Максимальное число отображаемых колонок в pandas DataFrame
max_rows : int
Максимальное число отображаемых строк
table_width : int или None
Ширина таблиц pandas (в пикселях)
figure_size : tuple
Размер по умолчанию для matplotlib графиков
"""
# Настройка контейнера
css = f"""
<style>
.container {{ width:{container_width} !important; }}
.output_area {{ width:100%; overflow-x: auto; }}
</style>
"""
display(HTML(css))

# Настройка pandas
import pandas as pd
pd.set_option('display.max_columns', max_columns)
pd.set_option('display.max_rows', max_rows)
if table_width:
pd.set_option('display.width', table_width)

# Настройка matplotlib
import matplotlib.pyplot as plt
plt.rcParams['figure.figsize'] = figure_size

# Пример использования
configure_notebook(container_width='90%', max_columns=None, 
table_width=1000, figure_size=(14, 10))

def display_wide_df(df, max_width=None):
"""
Отображает широкий DataFrame с горизонтальной прокруткой

Параметры:
-----------
df : pandas.DataFrame
DataFrame для отображения
max_width : int или None
Максимальная ширина в пикселях
"""
width = max_width or min(1500, df.shape[1] * 100)

styles = [
f'max-width: {width}px',
'overflow-x: auto',
'border: 1px solid #ddd',
'padding: 10px'
]

style_html = '<style>div.output_html { %s }</style>' % '; '.join(styles)
display(HTML(style_html + df.to_html()))

class NotebookDisplayConfig:
@staticmethod
def default():
configure_notebook(container_width='90%')

@staticmethod
def wide():
configure_notebook(container_width='98%', table_width=2000, 
figure_size=(16, 10))

@staticmethod
def presentation():
configure_notebook(container_width='85%', max_rows=15, 
figure_size=(10, 6))

# Использование
NotebookDisplayConfig.wide() # Для детального анализа
# ...работа с данными...
NotebookDisplayConfig.presentation() # Для представления результатов

def style_dataframe(df, text_color="#333", header_bg="#f5f5f5", 
hover_color="#f0f0ff", border_color="#ddd"):
"""Применяет стильное форматирование к pandas DataFrame"""
styles = [
f'font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
'border-collapse: collapse',
'width: 100%',
f'color: {text_color}',
'font-size: 13px',
'overflow: auto',
'max-height: 500px'
]

table_styles = [
dict(selector="th", props=[
(f"background-color", header_bg),
("color", "#000"),
("font-weight", "bold"),
("text-align", "left"),
("padding", "8px")
]),
dict(selector="td", props=[
("padding", "8px"),
("border-top", f"1px solid {border_color}")
]),
dict(selector="tr:hover", props=[
("background-color", hover_color)
]),
dict(selector="tr:nth-child(even)", props=[
("background-color", "#f9f9f9")
])
]

styled_df = df.style.set_table_styles(table_styles)
display(HTML(f"<style>div.rendered_html table {{ {'; '.join(styles)} }}</style>"))
return styled_df

# Пример использования
styled_df = style_dataframe(df)
styled_df

def configure_visualizations(dpi=100, font_size=12, style='seaborn-v0_8-whitegrid', 
width=12, height=8):
"""Настраивает параметры визуализации для matplotlib и seaborn"""
import matplotlib.pyplot as plt
import seaborn as sns

plt.style.use(style)
plt.rcParams['figure.figsize'] = (width, height)
plt.rcParams['figure.dpi'] = dpi
plt.rcParams['font.size'] = font_size
plt.rcParams['axes.titlesize'] = font_size + 2
plt.rcParams['axes.labelsize'] = font_size
plt.rcParams['xtick.labelsize'] = font_size – 2
plt.rcParams['ytick.labelsize'] = font_size – 2

# Настройка seaborn для совместимости
sns.set_context("notebook", font_scale=font_size/12)

print(f"Визуализации настроены: размер {width}x{height}, DPI {dpi}, шрифт {font_size}px")

# Пример использования
configure_visualizations(dpi=120, font_size=14, width=14, height=10)

from IPython.display import display, HTML
import math

def paginate_dataframe(df, rows_per_page=20):
"""Создает пагинацию для больших DataFrame"""
total_pages = math.ceil(len(df) / rows_per_page)

html = f"""
<div id="pagination_container">
<div id="pagination_table"></div>
<div id="pagination_controls">
Страница: <span id="current_page">1</span> из <span id="total_pages">{total_pages}</span>
<button id="prev_page" onclick="prevPage()">◀ Назад</button>
<button id="next_page" onclick="nextPage()">Вперед ▶</button>
</div>
</div>

<script>
var df_json = {df.to_json(orient='records')};
var current_page = 1;
var rows_per_page = {rows_per_page};
var total_pages = {total_pages};

function displayPage(page) {{
var start = (page – 1) * rows_per_page;
var end = start + rows_per_page;
var page_data = df_json.slice(start, end);

var table = '<table>';
// Заголовки
table += '<thead><tr>';
Object.keys(df_json[0]).forEach(key => {{
table += `<th>${{key}}</th>`;
}});
table += '</tr></thead>';

// Данные
table += '<tbody>';
page_data.forEach(row => {{
table += '<tr>';
Object.values(row).forEach(val => {{
table += `<td>${{val}}</td>`;
}});
table += '</tr>';
}});
table += '</tbody></table>';

document.getElementById('pagination_table').innerHTML = table;
document.getElementById('current_page').innerText = page;
}}

function nextPage() {{
if (current_page < total_pages) {{
current_page++;
displayPage(current_page);
}}
}}

function prevPage() {{
if (current_page > 1) {{
current_page--;
displayPage(current_page);
}}
}}

// Инициализация
displayPage(1);
</script>

<style>
#pagination_container {{
font-family: Arial, sans-serif;
margin-top: 20px;
}}
#pagination_table table {{
width: 100%;
border-collapse: collapse;
}}
#pagination_table th {{
background-color: #f5f5f5;
padding: 8px;
text-align: left;
border-bottom: 2px solid #ddd;
}}
#pagination_table td {{
padding: 8px;
border-bottom: 1px solid #ddd;
}}
#pagination_controls {{
margin-top: 10px;
text-align: center;
}}
#pagination_controls button {{
margin: 0 5px;
padding: 5px 10px;
background-color: #f8f9fa;
border: 1px solid #ddd;
border-radius: 3px;
cursor: pointer;
}}
#pagination_controls button:hover {{
background-color: #e9ecef;
}}
</style>
"""

display(HTML(html))

# Пример использования
# paginate_dataframe(large_df, rows_per_page=15)

def set_code_styling():
"""Улучшает отображение кода в ячейках"""
css = """
<style>
.CodeMirror {
font-family: 'Fira Code', 'Consolas', monospace;
font-size: 14px;
line-height: 1.5;
}

/* Подсветка синтаксиса */
.cm-keyword {
color: #7b1fa2 !important;
font-weight: bold;
}
.cm-operator {
color: #9c27b0 !important;
}
.cm-variable {
color: #1976d2 !important;
}
.cm-string {
color: #388e3c !important;
}
.cm-comment {
color: #757575 !important;
font-style: italic;
}

/* Стили для ячеек ввода */
div.input_area {
background-color: #f8f8f8;
border-radius: 4px;
border: 1px solid #e0e0e0;
}

/* Стили для выполненных ячеек */
div.input_prompt {
color: #1976d2;
}
</style>
"""
display(HTML(css))

import ipywidgets as widgets
from IPython.display import display

def create_display_controls():
"""Создает виджеты для управления отображением notebook"""

width_slider = widgets.IntSlider(
value=90, min=60, max=100, step=5,
description='Ширина:',
style={'description_width': 'initial'},
layout=widgets.Layout(width='300px')
)

font_size = widgets.Dropdown(
options=[('Мелкий', 12), ('Средний', 14), ('Крупный', 16)],
value=14,
description='Размер шрифта:',
style={'description_width': 'initial'},
layout=widgets.Layout(width='300px')
)

theme = widgets.RadioButtons(
options=['Светлая', 'Темная', 'Контрастная'],
value='Светлая',
description='Тема:',
layout=widgets.Layout(width='300px')
)

table_style = widgets.Dropdown(
options=['Базовая', 'Компактная', 'Расширенная'],
value='Базовая',
description='Стиль таблиц:',
style={'description_width': 'initial'},
layout=widgets.Layout(width='300px')
)

def on_change(change):
width = width_slider.value
font = font_size.value
theme_val = theme.value
table = table_style.value

# Применение стилей на основе выбранных параметров
css_styles = [f".container {{ width:{width}% !important; }}"]

if theme_val == 'Светлая':
css_styles.extend([
"body { background-color: white; color: #333; }",
".output_area { background-color: #fafafa; }"
])
elif theme_val == 'Темная':
css_styles.extend([
"body { background-color: #2d2d2d; color: #f0f0f0; }",
".output_area { background-color: #3d3d3d; }",
".rendered_html table { color: #e0e0e0; }",
".CodeMirror { filter: invert(85%); }"
])
elif theme_val == 'Контрастная':
css_styles.extend([
"body { background-color: white; color: black; }",
".rendered_html table { border: 2px solid black; }",
".rendered_html th { background-color: #000; color: white; }",
".CodeMirror { border: 1px solid black; }"
])

css_styles.append(f"body, .rendered_html {{ font-size: {font}px; }}")

# Стили таблиц
if table == 'Компактная':
css_styles.extend([
".rendered_html td, .rendered_html th { padding: 2px 4px; }",
".rendered_html table { font-size: 90%; }"
])
elif table == 'Расширенная':
css_styles.extend([
".rendered_html td, .rendered_html th { padding: 10px 14px; }",
".rendered_html table { width: 100%; }"
])

# Применение стилей
display(HTML(f"<style>{' '.join(css_styles)}</style>"))

# Привязка обработчиков событий
width_slider.observe(on_change, names='value')
font_size.observe(on_change, names='value')
theme.observe(on_change, names='value')
table_style.observe(on_change, names='value')

# Отображение контролов
controls = widgets.VBox([
widgets.HBox([widgets.VBox([width_slider, font_size]), 
widgets.VBox([theme, table_style])])
])
display(controls)

# Инициализация стилей
on_change(None)

# Использование
# create_display_controls()