我正在使用 CSS 制作日历，当单元格中包含不同数量的文本时，我似乎无法让表格修复其布局。理想情况下，我希望文本在超出单元格大小时才被截断，而不是扩展，这会扰乱日历的统一外观。同时，我需要将表格全屏显示，并按照 CSS 中的定义固定顶部标题。我设法使用 table-layout: fixed; 使单元格的宽度很好地发生了这种情况。但似乎无法让它为高度工作。我试过使用 white-space: nowrap; 和 overflow: hidden; 但似乎无法实现。
任何信息都会非常有用。
.calendar_main{
table-layout: fixed;
position: absolute;
height:100%;
width:100%;
top: 0;
bottom: 0;
left: 0;
right: 0;
font-size:20px;
border-collapse: collapse;
background-color: #FFFFFF;
}
.calendar_main tr:nth-child(even) td:nth-child(odd),
.calendar_main tr:nth-child(odd) td:nth-child(even)
{
background-color: #f6f9eb;
}
.calendar_main td{
border: 2px solid black;
vertical-align: top;
}
.calendar_main th{
border: 2px solid black;
background-color: #A7C942;
color: #ffffff;
height:25px;
}
.icon{
width:64px;
height:64px;
vertical-align: middle;
}
#cal_title{
text-align: center;
background-color: #FFFFFF;
height:64px;
font-size:30px;
}
#cal_previous{
background-color: #FFFFFF;
height:64px;
}
#cal_next{
text-align: right;
background-color: #FFFFFF;
height:64px;
}<html>
<head>
<title>Calendar</title>
<link rel='stylesheet' type='text/css' href='style_1.css'>
<meta charset='utf-8' />
</head>
<body>
<center>
<table class="calendar_main">
<tr>
<td colspan=2 id="cal_previous"><a href="index.php?section=calendar&month=3&year=2017"><img class="icon" src="icon_previous.png"></a></td>
<td colspan=3 id="cal_title">April - 2017</td>
<td colspan=2 id="cal_next"><a href="index.php?section=calendar&month=5&year=2017"><img class="icon" src="icon_next.png"></a></td>
</tr>
<tr>
<th>Mon</th><th>Tue</th><th>Wed</th><th>Thu</th><th>Fri</th><th>Sat</th><th>Sun</th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>1<br>Event1<br>Event2<br>Event3<br>Event4</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
<td>5<br>Event1</td>
<td>6<br>Event2</td>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
<tr>
<td>10<br>Event1</td>
<td>11</td>
<td>12<br>Event1</td>
<td>13<br>Event1</td>
<td>14</td>
<td>15</td>
<td>16</td>
</tr>
<tr>
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td>
<td>21<br>Event1<br>Event2</td>
<td>22</td>
<td>23</td>
</tr>
<tr>
<td>24<br>Event1</td>
<td>25</td>
<td>26</td>
<td>27</td>
<td>28</td>
<td>29</td>
<td>30</td>
</tr>
</table>
</body>
</html>
最佳答案
似乎没有办法限制表格单元格的高度。您可以将表格单元格的内容包装在一个 div 中，并为 div 设置一个最大高度:
.calendar_main{
table-layout: fixed;
position: absolute;
height:100%;
width:100%;
top: 0;
bottom: 0;
left: 0;
right: 0;
font-size:20px;
border-collapse: collapse;
background-color: #FFFFFF;
}
.calendar_main td div{height: 9vh; overflow: hidden;}
.calendar_main tr:nth-child(even) td:nth-child(odd),
.calendar_main tr:nth-child(odd) td:nth-child(even)
{
background-color: #f6f9eb;
}
.calendar_main td{
border: 2px solid black;
vertical-align: top;
}
.calendar_main th{
border: 2px solid black;
background-color: #A7C942;
color: #ffffff;
height:25px;
}
.icon{
width:64px;
height:64px;
vertical-align: middle;
}
#cal_title{
text-align: center;
background-color: #FFFFFF;
height:64px;
font-size:30px;
}
#cal_previous{
background-color: #FFFFFF;
height:64px;
}
#cal_next{
text-align: right;
background-color: #FFFFFF;
height:64px;
}<html>
<head>
<title>Calendar</title>
<link rel='stylesheet' type='text/css' href='style_1.css'>
<meta charset='utf-8' />
</head>
<body>
<center>
<table class="calendar_main">
<tr>
<td colspan=2 id="cal_previous"><a href="index.php?section=calendar&month=3&year=2017"><img class="icon" src="icon_previous.png"></a></td>
<td colspan=3 id="cal_title">April - 2017</td>
<td colspan=2 id="cal_next"><a href="index.php?section=calendar&month=5&year=2017"><img class="icon" src="icon_next.png"></a></td>
</tr>
<tr>
<th>Mon</th><th>Tue</th><th>Wed</th><th>Thu</th><th>Fri</th><th>Sat</th><th>Sun</th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td><div>1<br>Event1<br>Event2<br>Event3<br>Event4</div></td>
<td><div>5</div></td>
</tr>
<tr>
<td><div>5</div></td>
<td><div>5</div></td>
<td><div>5<br>Event1</div></td>
<td><div>5<br>Event1</div></td>
<td><div>5</div></td>
<td><div>5</div></td>
<td><div>5</div></td>
</tr>
<tr>
<td><div>5<br>Event1</div></td>
<td><div>5</div></td>
<td><div>5<br>Event1</div></td>
<td><div>5<br>Event1</div></td>
<td><div>5</div></td>
<td><div>5</div></td>
<td><div>5</div></td>
</tr>
<tr>
<td><div>5</div></td>
<td><div>5</div></td>
<td><div>5</div></td>
<td><div>5</div></td>
<td><div>5<br>Event1</div></td>
<td><div>5</div></td>
<td><div>5</div></td>
</tr>
<tr>
<td><div>5<br>Event1</div></td>
<td><div>5</div></td>
<td><div>5</div></td>
<td><div>5</div></td>
<td><div>5</div></td>
<td><div>5</div></td>
<td><div>5</div></td>
</tr>
</table>
</body>
</html>关于html - CSS 防止表格单元格垂直扩展，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42753454/