需要有关事件日历的帮助。有两个问题:
A) 无法缩小日历。 B) 无法使表格响应工作。
我厌倦了在 table 上使用高度和宽度，但在我的测试中没有效果。
.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。我确实有一个生成 html 的 JavaScript 代码。任何帮助将不胜感激!
最佳答案
您可以为此使用 CSS @Media 规则。您的表实际上已经响应了。但由于字体大小保持静态，包含它的 div 不能变小，这使得您的表格在小于 1000px 的 View 上似乎没有响应。
试试这个..
<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>关于html - 无法使 Bootstrap 表变小，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52848092/