Невозможно уменьшить размер таблицы начальной загрузки
Нужна помощь с календарем событий. Есть две проблемы:
А) Невозможно уменьшить календарь. Б) Невозможно заставить работать с таблицей.
Я устал использовать высоту и ширину на столе, но в моем тесте никаких эффектов.
.captop {
caption-side: top;
padding: 0;
}
.month {
padding: 1rem;
background: #6e69f5;
text-align: center;
}
.month ul {
margin: 0;
padding: 0;
list-style-type: none;
}
.month ul li {
color: white;
font-size: 20px;
text-transform: uppercase;
letter-spacing: 3px;
}
.month .prev {
float: left;
padding-top: 10px;
}
.month .next {
float: right;
padding-top: 10px;
}
#calendar>tbody>tr>td {
padding: 0;
}
#calendar .card,
#calendar .card-header {
border: 0;
border-radius: 0;
}
#calendar .active .card-header {
background: #6e69f5;
}<link rel = "stylesheet" href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin = "anonymous">
<div class = "container">
<div class = "row">
<div class = "col">
<h2 class = "section-heading text-uppercase text-center">Events</h2>
</div>
</div>
<div class = "row">
<div class = "col">
<div class = "table-responsive" id = "calDiv">
<table class = "table table-bordered" id = "calendar">
<caption class = "captop">
<div class = "month">
<ul>
<li class = "next">❯</li>
<li>October<br><span style = "font-size:18px">2018</span></li>
</ul>
</div>
</caption>
<thead>
<tr>
<td>Sunday</td>
<td>Monday</td>
<td>Tuesday</td>
<td>Wednesday</td>
<td>Thursday</td>
<td>Friday</td>
<td>Saturday</td>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class = "card">
<div class = "card-header text-right">0</div>
<div class = "card-body">
<p class = "h4 card-text calendar-info">No Events</p>
</div>
</div>
</td>
<td>
<div class = "card">
<div class = "card-header text-right">1</div>
<div class = "card-body">
<p class = "h4 card-text calendar-info">No Events</p>
</div>
</div>
</td>
<td>
<div class = "card">
<div class = "card-header text-right">2</div>
<div class = "card-body">
<p class = "h4 card-text calendar-info">No Events</p>
</div>
</div>
</td>
<td>
<div class = "card">
<div class = "card-header text-right">3</div>
<div class = "card-body">
<p class = "h4 card-text calendar-info">No Events</p>
</div>
</div>
</td>
<td>
<div class = "card">
<div class = "card-header text-right">4</div>
<div class = "card-body">
<p class = "h4 card-text calendar-info">No Events</p>
</div>
</div>
</td>
<td>
<div class = "card">
<div class = "card-header text-right">5</div>
<div class = "card-body">
<p class = "h4 card-text calendar-info">No Events</p>
</div>
</div>
</td>
<td>
<div class = "card">
<div class = "card-header text-right">6</div>
<div class = "card-body">
<p class = "h4 card-text calendar-info">No Events</p>
</div>
</div>
</td>
</tr>
<tr>
<td>
<div class = "card">
<div class = "card-header text-right">7</div>
<div class = "card-body">
<p class = "h4 card-text calendar-info">No Events</p>
</div>
</div>
</td>
<td>
<div class = "card">
<div class = "card-header text-right">8</div>
<div class = "card-body">
<p class = "h4 card-text calendar-info">No Events</p>
</div>
</div>
</td>
<td>
<div class = "card">
<div class = "card-header text-right">9</div>
<div class = "card-body">
<p class = "h4 card-text calendar-info">No Events</p>
</div>
</div>
</td>
<td>
<div class = "card">
<div class = "card-header text-right">10</div>
<div class = "card-body">
<p class = "h4 card-text calendar-info">No Events</p>
</div>
</div>
</td>
<td>
<div class = "card">
<div class = "card-header text-right">11</div>
<div class = "card-body">
<p class = "h4 card-text calendar-info">No Events</p>
</div>
</div>
</td>
<td>
<div class = "card">
<div class = "card-header text-right">12</div>
<div class = "card-body">
<p class = "h4 card-text calendar-info">No Events</p>
</div>
</div>
</td>
<td>
<div class = "card">
<div class = "card-header text-right">13</div>
<div class = "card-body">
<p class = "h4 card-text calendar-info">No Events</p>
</div>
</div>
</td>
</tr>
<tr>
<td>
<div class = "card">
<div class = "card-header text-right">14</div>
<div class = "card-body">
<p class = "h4 card-text calendar-info">No Events</p>
</div>
</div>
</td>
<td>
<div class = "card">
<div class = "card-header text-right">15</div>
<div class = "card-body">
<p class = "h4 card-text calendar-info">No Events</p>
</div>
</div>
</td>
<td>
<div class = "card">
<div class = "card-header text-right">16</div>
<div class = "card-body">
<p class = "h4 card-text calendar-info">No Events</p>
</div>
</div>
</td>
<td class = "active">
<div class = "card">
<div class = "card-header text-right">17</div>
<div class = "card-body">
<p class = "h4 card-text calendar-info">No Events</p>
</div>
</div>
</td>
<td>
<div class = "card">
<div class = "card-header text-right">18</div>
<div class = "card-body">
<p class = "h4 card-text calendar-info">No Events</p>
</div>
</div>
</td>
<td>
<div class = "card">
<div class = "card-header text-right">19</div>
<div class = "card-body">
<p class = "h4 card-text calendar-info">No Events</p>
</div>
</div>
</td>
<td>
<div class = "card">
<div class = "card-header text-right">20</div>
<div class = "card-body">
<p class = "h4 card-text calendar-info">No Events</p>
</div>
</div>
</td>
</tr>
<tr>
<td>
<div class = "card">
<div class = "card-header text-right">21</div>
<div class = "card-body">
<p class = "h4 card-text calendar-info">No Events</p>
</div>
</div>
</td>
<td>
<div class = "card">
<div class = "card-header text-right">22</div>
<div class = "card-body">
<p class = "h4 card-text calendar-info">No Events</p>
</div>
</div>
</td>
<td>
<div class = "card">
<div class = "card-header text-right">23</div>
<div class = "card-body">
<p class = "h4 card-text calendar-info">No Events</p>
</div>
</div>
</td>
<td>
<div class = "card">
<div class = "card-header text-right">24</div>
<div class = "card-body">
<p class = "h4 card-text calendar-info">No Events</p>
</div>
</div>
</td>
<td>
<div class = "card">
<div class = "card-header text-right">25</div>
<div class = "card-body">
<p class = "h4 card-text calendar-info">No Events</p>
</div>
</div>
</td>
<td>
<div class = "card">
<div class = "card-header text-right">26</div>
<div class = "card-body">
<p class = "h4 card-text calendar-info">No Events</p>
</div>
</div>
</td>
<td>
<div class = "card">
<div class = "card-header text-right">27</div>
<div class = "card-body">
<p class = "h4 card-text calendar-info">No Events</p>
</div>
</div>
</td>
</tr>
<tr>
<td>
<div class = "card">
<div class = "card-header text-right">28</div>
<div class = "card-body">
<p class = "h4 card-text calendar-info">No Events</p>
</div>
</div>
</td>
<td>
<div class = "card">
<div class = "card-header text-right">29</div>
<div class = "card-body">
<p class = "h4 card-text calendar-info">No Events</p>
</div>
</div>
</td>
<td>
<div class = "card">
<div class = "card-header text-right">30</div>
<div class = "card-body">
<p class = "h4 card-text calendar-info">No Events</p>
</div>
</div>
</td>
<td>
<div class = "card">
<div class = "card-header text-right">31</div>
<div class = "card-body">
<p class = "h4 card-text calendar-info">No Events</p>
</div>
</div>
</td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>Предоставленный код - это просто Bootstrap 4 и HTML. У меня есть код JavaScript, который генерирует HTML. Любая помощь будет оценена по достоинству!
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
1
0
5 614
3
Перейти к ответу
Данный вопрос помечен как решенный
Ответы 3
Для этого вы можете использовать правило CSS @Media. Ваша таблица на самом деле уже реагирует. Но поскольку размер шрифта остается неизменным, содержащий его div не может быть меньше, из-за чего ваша таблица не реагирует на запросы размером менее 1000 пикселей.
Попробуй это..
<html>
<head>
<style>
@media(max-width:991px) {
#calendar,
div.card-body>p {
font-size: smaller;
}
#calendar>tbody>tr>td>div>div {
padding: 5px;
}
}
@media(max-width:768px) {
#calendar,
div.card-body>p {
font-size: x-small;
}
#calendar>tbody>tr>td>div>div {
padding: 5px;
}
}
@media(max-width:480px) {
#calendar,
div.card-body>p {
font-size: xx-small;
}
#calendar>tbody>tr>td>div>div {
padding: 3px;
}
}
@media(max-width:440px) {
#calendar,
div.card-body>p {
font-size: 7.5px;
}
#calendar,
#calendar>tbody>tr>td>div>div {
padding: 0;
}
}
@media(max-width:390px) {
#calendar,
div.card-body>p {
font-size: 6px;
}
}
.captop {
caption-side: top;
padding: 0;
}
.month {
padding: 1rem;
background: #6e69f5;
text-align: center;
}
.month ul {
margin: 0;
padding: 0;
list-style-type: none;
}
.month ul li {
color: white;
font-size: 20px;
text-transform: uppercase;
letter-spacing: 3px;
}
.month .prev {
float: left;
padding-top: 10px;
}
.month .next {
float: right;
padding-top: 10px;
}
#calendar>tbody>tr>td {
padding: 0;
}
#calendar .card,
#calendar .card-header {
border: 0;
border-radius: 0;
}
#calendar .active .card-header {
background: #6e69f5;
}
</style>
<script src = "/scripts/snippet-javascript-console.min.js?v=1"></script>
<style type = "text/css">
.as-console-wrapper {
position: fixed;
bottom: 0;
left: 0;
right: 0;
max-height: 150px;
overflow-y: scroll;
overflow-x: hidden;
border-top: 1px solid #000;
display: none;
}
.as-console {
background: #e9e9e9;
border: 1px solid #ccc;
display: table;
width: 100%;
border-collapse: collapse;
}
.as-console-row {
display: table-row;
font-family: monospace;
font-size: 13px;
}
.as-console-row:after {
display: table-cell;
padding: 3px 6px;
color: rgba(0, 0, 0, .35);
border: 1px solid #ccc;
content: attr(data-date);
vertical-align: top;
}
.as-console-row+.as-console-row>* {
border: 1px solid #ccc;
}
.as-console-row-code {
width: 100%;
white-space: pre-wrap;
padding: 3px 5px;
display: table-cell;
font-family: monospace;
font-size: 13px;
vertical-align: middle;
}
.as-console-error:before {
content: 'Error: ';
color: #f00;
}
.as-console-assert:before {
content: 'Assertion failed: ';
color: #f00;
}
.as-console-info:before {
content: 'Info: ';
color: #00f;
}
.as-console-warning:before {
content: 'Warning: ';
color: #e90
}
@-webkit-keyframes flash {
0% {
background: rgba(255, 240, 0, .25);
}
100% {
background: none;
}
}
@-moz-keyframes flash {
0% {
background: rgba(255, 240, 0, .25);
}
100% {
background: none;
}
}
@-ms-keyframes flash {
0% {
background: rgba(255, 240, 0, .25);
}
100% {
background: none;
}
}
@keyframes flash {
0% {
background: rgba(255, 240, 0, .25);
}
100% {
background: none;
}
}
.as-console-row-code,
.as-console-row:after {
-webkit-animation: flash 1s;
-moz-animation: flash 1s;
-ms-animation: flash 1s;
animation: flash 1s;
}
</style>
</head>
<body>
<link rel = "stylesheet" href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin = "anonymous">
<div class = "container">
<div class = "row">
<div class = "col">
<h2 class = "section-heading text-uppercase text-center">Events</h2>
</div>
</div>
<div class = "row">
<div class = "col">
<div class = "table-responsive" id = "calDiv">
<table class = "table table-bordered" id = "calendar">
<caption class = "captop">
<div class = "month">
<ul>
<li class = "next">❯</li>
<li>October<br><span style = "font-size:18px">2018</span></li>
</ul>
</div>
</caption>
<thead>
<tr>
<td>Sunday</td>
<td>Monday</td>
<td>Tuesday</td>
<td>Wednesday</td>
<td>Thursday</td>
<td>Friday</td>
<td>Saturday</td>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class = "card">
<div class = "card-header text-right">0</div>
<div class = "card-body">
<p class = "h4 card-text calendar-info">No Events</p>
</div>
</div>
</td>
<td>
<div class = "card">
<div class = "card-header text-right">1</div>
<div class = "card-body">
<p class = "h4 card-text calendar-info">No Events</p>
</div>
</div>
</td>
<td>
<div class = "card">
<div class = "card-header text-right">2</div>
<div class = "card-body">
<p class = "h4 card-text calendar-info">No Events</p>
</div>
</div>
</td>
<td>
<div class = "card">
<div class = "card-header text-right">3</div>
<div class = "card-body">
<p class = "h4 card-text calendar-info">No Events</p>
</div>
</div>
</td>
<td>
<div class = "card">
<div class = "card-header text-right">4</div>
<div class = "card-body">
<p class = "h4 card-text calendar-info">No Events</p>
</div>
</div>
</td>
<td>
<div class = "card">
<div class = "card-header text-right">5</div>
<div class = "card-body">
<p class = "h4 card-text calendar-info">No Events</p>
</div>
</div>
</td>
<td>
<div class = "card">
<div class = "card-header text-right">6</div>
<div class = "card-body">
<p class = "h4 card-text calendar-info">No Events</p>
</div>
</div>
</td>
</tr>
<tr>
<td>
<div class = "card">
<div class = "card-header text-right">7</div>
<div class = "card-body">
<p class = "h4 card-text calendar-info">No Events</p>
</div>
</div>
</td>
<td>
<div class = "card">
<div class = "card-header text-right">8</div>
<div class = "card-body">
<p class = "h4 card-text calendar-info">No Events</p>
</div>
</div>
</td>
<td>
<div class = "card">
<div class = "card-header text-right">9</div>
<div class = "card-body">
<p class = "h4 card-text calendar-info">No Events</p>
</div>
</div>
</td>
<td>
<div class = "card">
<div class = "card-header text-right">10</div>
<div class = "card-body">
<p class = "h4 card-text calendar-info">No Events</p>
</div>
</div>
</td>
<td>
<div class = "card">
<div class = "card-header text-right">11</div>
<div class = "card-body">
<p class = "h4 card-text calendar-info">No Events</p>
</div>
</div>
</td>
<td>
<div class = "card">
<div class = "card-header text-right">12</div>
<div class = "card-body">
<p class = "h4 card-text calendar-info">No Events</p>
</div>
</div>
</td>
<td>
<div class = "card">
<div class = "card-header text-right">13</div>
<div class = "card-body">
<p class = "h4 card-text calendar-info">No Events</p>
</div>
</div>
</td>
</tr>
<tr>
<td>
<div class = "card">
<div class = "card-header text-right">14</div>
<div class = "card-body">
<p class = "h4 card-text calendar-info">No Events</p>
</div>
</div>
</td>
<td>
<div class = "card">
<div class = "card-header text-right">15</div>
<div class = "card-body">
<p class = "h4 card-text calendar-info">No Events</p>
</div>
</div>
</td>
<td>
<div class = "card">
<div class = "card-header text-right">16</div>
<div class = "card-body">
<p class = "h4 card-text calendar-info">No Events</p>
</div>
</div>
</td>
<td class = "active">
<div class = "card">
<div class = "card-header text-right">17</div>
<div class = "card-body">
<p class = "h4 card-text calendar-info">No Events</p>
</div>
</div>
</td>
<td>
<div class = "card">
<div class = "card-header text-right">18</div>
<div class = "card-body">
<p class = "h4 card-text calendar-info">No Events</p>
</div>
</div>
</td>
<td>
<div class = "card">
<div class = "card-header text-right">19</div>
<div class = "card-body">
<p class = "h4 card-text calendar-info">No Events</p>
</div>
</div>
</td>
<td>
<div class = "card">
<div class = "card-header text-right">20</div>
<div class = "card-body">
<p class = "h4 card-text calendar-info">No Events</p>
</div>
</div>
</td>
</tr>
<tr>
<td>
<div class = "card">
<div class = "card-header text-right">21</div>
<div class = "card-body">
<p class = "h4 card-text calendar-info">No Events</p>
</div>
</div>
</td>
<td>
<div class = "card">
<div class = "card-header text-right">22</div>
<div class = "card-body">
<p class = "h4 card-text calendar-info">No Events</p>
</div>
</div>
</td>
<td>
<div class = "card">
<div class = "card-header text-right">23</div>
<div class = "card-body">
<p class = "h4 card-text calendar-info">No Events</p>
</div>
</div>
</td>
<td>
<div class = "card">
<div class = "card-header text-right">24</div>
<div class = "card-body">
<p class = "h4 card-text calendar-info">No Events</p>
</div>
</div>
</td>
<td>
<div class = "card">
<div class = "card-header text-right">25</div>
<div class = "card-body">
<p class = "h4 card-text calendar-info">No Events</p>
</div>
</div>
</td>
<td>
<div class = "card">
<div class = "card-header text-right">26</div>
<div class = "card-body">
<p class = "h4 card-text calendar-info">No Events</p>
</div>
</div>
</td>
<td>
<div class = "card">
<div class = "card-header text-right">27</div>
<div class = "card-body">
<p class = "h4 card-text calendar-info">No Events</p>
</div>
</div>
</td>
</tr>
<tr>
<td>
<div class = "card">
<div class = "card-header text-right">28</div>
<div class = "card-body">
<p class = "h4 card-text calendar-info">No Events</p>
</div>
</div>
</td>
<td>
<div class = "card">
<div class = "card-header text-right">29</div>
<div class = "card-body">
<p class = "h4 card-text calendar-info">No Events</p>
</div>
</div>
</td>
<td>
<div class = "card">
<div class = "card-header text-right">30</div>
<div class = "card-body">
<p class = "h4 card-text calendar-info">No Events</p>
</div>
</div>
</td>
<td>
<div class = "card">
<div class = "card-header text-right">31</div>
<div class = "card-body">
<p class = "h4 card-text calendar-info">No Events</p>
</div>
</div>
</td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<script type = "text/javascript">
</script>
<div class = "as-console-wrapper">
<div class = "as-console"></div>
</div>
</body>
</html>Да, это тоже здорово звучит. Думаю, вы можете опубликовать ответ на этот вопрос. В любом случае спасибо @Girisha C за правку, но особой разницы нет, поэтому я ее отклонил.
—
17.10.2018 10:40
Макет таблицы по умолчанию автоматический, поэтому исправьте его:
table {
table-layout: fixed;
}
Ответ принят как подходящий
Уменьшая font-size и padding вместе с @media всех элементов вашего пользовательского интерфейса, вы можете добиться этого :)
<link rel = "stylesheet" href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" >
<style>
.captop {
caption-side: top;
padding: 0;
}
.month {
padding: 1rem;
background: #6e69f5;
text-align: center;
}
.month ul {
margin: 0;
padding: 0;
list-style-type: none;
}
.month ul li {
color: white;
font-size: 20px;
text-transform: uppercase;
letter-spacing: 3px;
}
.month .prev {
float: left;
padding-top: 10px;
}
.month .next {
float: right;
padding-top: 10px;
}
#calendar>tbody>tr>td {
padding: 0;
}
#calendar .card,
#calendar .card-header {
border: 0;
border-radius: 0;
}
#calendar .active .card-header {
background: #6e69f5;
}
@media (max-width: 768px) {
#calendar .card {
padding: 0;
}
.month,
.table td, .table th,
#calendar .card-header {
padding: 4px;
}
.card-body {
padding: 4px !important;
}
.month ul li,
.table td, .table th,
.h4.card-text.calendar-info {
font-size: 10px;
}
.month ul li span {
font-size: 10px !important;
}
}
</style>
<div class = "container">
<div class = "row">
<div class = "col">
<h2 class = "section-heading text-uppercase text-center">Events</h2>
</div>
</div>
<div class = "row">
<div class = "col">
<div class = "table-responsive" id = "calDiv">
<table class = "table table-bordered" id = "calendar">
<caption class = "captop">
<div class = "month">
<ul>
<li class = "next">❯</li>
<li>October<br><span style = "font-size:18px">2018</span></li>
</ul>
</div>
</caption>
<thead>
<tr>
<td>Sunday</td>
<td>Monday</td>
<td>Tuesday</td>
<td>Wednesday</td>
<td>Thursday</td>
<td>Friday</td>
<td>Saturday</td>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class = "card">
<div class = "card-header text-right">0</div>
<div class = "card-body">
<p class = "h4 card-text calendar-info">No Events</p>
</div>
</div>
</td>
<td>
<div class = "card">
<div class = "card-header text-right">1</div>
<div class = "card-body">
<p class = "h4 card-text calendar-info">No Events</p>
</div>
</div>
</td>
<td>
<div class = "card">
<div class = "card-header text-right">2</div>
<div class = "card-body">
<p class = "h4 card-text calendar-info">No Events</p>
</div>
</div>
</td>
<td>
<div class = "card">
<div class = "card-header text-right">3</div>
<div class = "card-body">
<p class = "h4 card-text calendar-info">No Events</p>
</div>
</div>
</td>
<td>
<div class = "card">
<div class = "card-header text-right">4</div>
<div class = "card-body">
<p class = "h4 card-text calendar-info">No Events</p>
</div>
</div>
</td>
<td>
<div class = "card">
<div class = "card-header text-right">5</div>
<div class = "card-body">
<p class = "h4 card-text calendar-info">No Events</p>
</div>
</div>
</td>
<td>
<div class = "card">
<div class = "card-header text-right">6</div>
<div class = "card-body">
<p class = "h4 card-text calendar-info">No Events</p>
</div>
</div>
</td>
</tr>
<tr>
<td>
<div class = "card">
<div class = "card-header text-right">7</div>
<div class = "card-body">
<p class = "h4 card-text calendar-info">No Events</p>
</div>
</div>
</td>
<td>
<div class = "card">
<div class = "card-header text-right">8</div>
<div class = "card-body">
<p class = "h4 card-text calendar-info">No Events</p>
</div>
</div>
</td>
<td>
<div class = "card">
<div class = "card-header text-right">9</div>
<div class = "card-body">
<p class = "h4 card-text calendar-info">No Events</p>
</div>
</div>
</td>
<td>
<div class = "card">
<div class = "card-header text-right">10</div>
<div class = "card-body">
<p class = "h4 card-text calendar-info">No Events</p>
</div>
</div>
</td>
<td>
<div class = "card">
<div class = "card-header text-right">11</div>
<div class = "card-body">
<p class = "h4 card-text calendar-info">No Events</p>
</div>
</div>
</td>
<td>
<div class = "card">
<div class = "card-header text-right">12</div>
<div class = "card-body">
<p class = "h4 card-text calendar-info">No Events</p>
</div>
</div>
</td>
<td>
<div class = "card">
<div class = "card-header text-right">13</div>
<div class = "card-body">
<p class = "h4 card-text calendar-info">No Events</p>
</div>
</div>
</td>
</tr>
<tr>
<td>
<div class = "card">
<div class = "card-header text-right">14</div>
<div class = "card-body">
<p class = "h4 card-text calendar-info">No Events</p>
</div>
</div>
</td>
<td>
<div class = "card">
<div class = "card-header text-right">15</div>
<div class = "card-body">
<p class = "h4 card-text calendar-info">No Events</p>
</div>
</div>
</td>
<td>
<div class = "card">
<div class = "card-header text-right">16</div>
<div class = "card-body">
<p class = "h4 card-text calendar-info">No Events</p>
</div>
</div>
</td>
<td class = "active">
<div class = "card">
<div class = "card-header text-right">17</div>
<div class = "card-body">
<p class = "h4 card-text calendar-info">No Events</p>
</div>
</div>
</td>
<td>
<div class = "card">
<div class = "card-header text-right">18</div>
<div class = "card-body">
<p class = "h4 card-text calendar-info">No Events</p>
</div>
</div>
</td>
<td>
<div class = "card">
<div class = "card-header text-right">19</div>
<div class = "card-body">
<p class = "h4 card-text calendar-info">No Events</p>
</div>
</div>
</td>
<td>
<div class = "card">
<div class = "card-header text-right">20</div>
<div class = "card-body">
<p class = "h4 card-text calendar-info">No Events</p>
</div>
</div>
</td>
</tr>
<tr>
<td>
<div class = "card">
<div class = "card-header text-right">21</div>
<div class = "card-body">
<p class = "h4 card-text calendar-info">No Events</p>
</div>
</div>
</td>
<td>
<div class = "card">
<div class = "card-header text-right">22</div>
<div class = "card-body">
<p class = "h4 card-text calendar-info">No Events</p>
</div>
</div>
</td>
<td>
<div class = "card">
<div class = "card-header text-right">23</div>
<div class = "card-body">
<p class = "h4 card-text calendar-info">No Events</p>
</div>
</div>
</td>
<td>
<div class = "card">
<div class = "card-header text-right">24</div>
<div class = "card-body">
<p class = "h4 card-text calendar-info">No Events</p>
</div>
</div>
</td>
<td>
<div class = "card">
<div class = "card-header text-right">25</div>
<div class = "card-body">
<p class = "h4 card-text calendar-info">No Events</p>
</div>
</div>
</td>
<td>
<div class = "card">
<div class = "card-header text-right">26</div>
<div class = "card-body">
<p class = "h4 card-text calendar-info">No Events</p>
</div>
</div>
</td>
<td>
<div class = "card">
<div class = "card-header text-right">27</div>
<div class = "card-body">
<p class = "h4 card-text calendar-info">No Events</p>
</div>
</div>
</td>
</tr>
<tr>
<td>
<div class = "card">
<div class = "card-header text-right">28</div>
<div class = "card-body">
<p class = "h4 card-text calendar-info">No Events</p>
</div>
</div>
</td>
<td>
<div class = "card">
<div class = "card-header text-right">29</div>
<div class = "card-body">
<p class = "h4 card-text calendar-info">No Events</p>
</div>
</div>
</td>
<td>
<div class = "card">
<div class = "card-header text-right">30</div>
<div class = "card-body">
<p class = "h4 card-text calendar-info">No Events</p>
</div>
</div>
</td>
<td>
<div class = "card">
<div class = "card-header text-right">31</div>
<div class = "card-body">
<p class = "h4 card-text calendar-info">No Events</p>
</div>
</div>
</td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>Другие вопросы по теме
Полужирным шрифтом закруглены и цветные элементы в списке с использованием html и css
Если ширина родительского элемента меньше 500 пикселей, установить для детей ширину автоматически?
Пользовательский отступ ol li
Sticky Bar Не может плавать: верно
Обновить компонент Vue при навигации
Как уменьшить верхнее и нижнее поля одинаково, но сохранить центральное меню единообразным?
Таблица начальной загрузки - стиль строки не применяется ко всей строке?
Уменьшение всей HTML-страницы
Как скрыть все, кроме textarea, при печати с помощью специального css
После стилизации кнопки CSS текст не отображается
Похожие вопросы
Что такое <router-view: key = "$ route.fullPath">?
Есть ли способ добавить постоянство обновления к индикатору выполнения?
Изменения в объекте ng-options не обновляются до HTML
Запретить загрузку Ajax Chat вверху страницы
Как изменить HTML-файл на PHP
PHP 2 Выберите вариант Всегда синхронизировать со строкой таблицы в базе данных
Как получить данные из базы данных в динамически созданной таблице с помощью codeiginter
Полужирным шрифтом закруглены и цветные элементы в списке с использованием html и css
Пользовательский отступ ol li
Включите двойное касание для увеличения и уменьшения масштаба HTML-файла
Возможно, вы захотите преобразовать (повернуть) дни недели по вертикали и на небольших экранах.