Кастомизация

Кастомная таблица

Таблица с контентом

Если вам нужно чтобы с одной из стороны была картинка, а сдругой текст или что-то свое, возмонжо этот вариант поможет это реализовать. Ниже представлен пример из кода HTML и CSS с небольшими коментариями.

Code block custom HTML

<table class="name">
    <tbody>
    <tr class="namerevealing"> <!-- (1)! -->
        <td colspan="2" style="text-align: center;">
        <img src="https://dummyimage.com/600x400/" class="tablesimg">
        </td>
    </tr>
    <tr>
        <td rowspan="2" class="namehiding" style="width: 300px;"> <!-- (2)! -->
        <img src="https://dummyimage.com/600x400/">
        </td>
        <td style="text-align: center;"></td>
    </tr>
    <tr>
        <td style="text-align: center;"></td>
    </tr>
    </tbody>
</table>

Данный класс по умолчанию будет скрыт с помощью css, и открывается когда ширина устройства меньше 600px
Данный класс работает противоположно классу namerevealing, скрывается когда устройство меньше 600px

Заметка

Чтобы текст был с небольшым отступом от картинки, добавьте padding-left: 10px; к стилю <td>. Пример:

<td style="text-align: center; padding-left: 10px;"></td>

Также обратите внимание и подстройте под себя <td colspan="x"> и <td rowspan="x">

Более подробней можете посмотреть тут: The Table element

Данный код css мы помещаем в extra.css если вы используете Material form Mkdocs

Code block custom CSS

@media (min-width: 600px) {
  .namerevealing {
    display: none;
  }
}

@media (max-width: 600px) {
  .namehiding {
    display: none;
  }
}

.namehiding {
  max-width: none; /* (1)! */
}

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

Пример


	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod nulla. Curabitur feugiat, tortor non consequat finibus, justo purus auctor massa, nec semper lorem quam in massa..
	Более детальней ознакомиться с таблица HTML можно перейдя по ссылке developer.mozilla.org

Добавление абзацев

Чтобы добиться абзацев можно использовать  

Пример

&nbsp; Lorem ipsum dolor sit amet, consectetur adipiscing elit

C абзацембез него

Lorem ipsum dolor sit amet,
consectetur adipiscing elit

Небольшой совет, комментарий

<small>
  :octicons-light-bulb-16:
  **Tip:** Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod nulla. Curabitur feugiat, tortor non consequat finibus, justo purus auctor massa, nec semper lorem quam in massa.
</small>

Tip: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod nulla. Curabitur feugiat, tortor non consequat finibus, justo purus auctor massa, nec semper lorem quam in massa.