CSS 防止表格单元格垂直扩展答案

【问题标题】：CSS prevent table cell from expanding verticallyCSS 防止表格单元格垂直扩展
【发布时间】：2017-08-02 20:50:23
【问题描述】：

我正在使用 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>

【问题讨论】：

我需要单元格中的文本来支持多行。删除
后还有其他方法吗？也许是预先格式化并使用换行符？或者这会导致同样的问题吗？关于单元格的固定高度，这是否意味着我必须使用 javascript 使用每个单元格的特定 px 值直接调整每个单元格的高度？
为 td 设置高度没有帮助。我所说的设置高度，完全是使用overflow 的规则，而不是这种情况。

标签： html css resize html-table cell

【解决方案1】：

似乎没有办法限制表格单元格的高度。您可以将表格单元格的内容包装在 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>

【讨论】：

是否可以将最大高度动态设置为单元格高度？
正如我提到的max-height 不适用于表格单元格或行。为什么不直接为表格单元格中的 div 设置最大高度？它会自动限制其父级（表格单元格）。
因为我需要整个日历动态适应浏览器窗口的大小。如果我为单元格中的 div 设置特定值，那么它不会在不同的纵横比下工作吗？
不是具体值。您可以设置动态max-height，但对于 div，而不是表格单元格。例如div{ max-height: 5vh} 将所有 div（和表格单元格）的最大高度设置为屏幕高度的 5%。
感谢您的样品！但是，似乎随着单元格变得更高，最大高度没有正确调整。它越大，底部的蒙版就越大。

【解决方案2】：

正如 Farzin 所说，限制 table-cell 元素的高度是不可能的。

但是，您可以为表格单元格创建一个内部容器，并设置height（不是max-height）以使单元格高度相同。

内部容器还允许单元格的视觉内容具有不同的高度，这有时很有用。

【讨论】：

【解决方案3】：

CSS：

th, td {
    width: 100px;
}
div{
    height: 15px;
    overflow: hidden;
}
p{
    margin: 0;
}

HTML：

<tr>
<td><div><p>I'm making a calendar using CSS and can't seem to get the table to fix it's layout when a cell has varying amounts of text within. Ideally I'd want the text to just be cut off when it goes beyond the size of the cell rather than expanding which is messing with the uniform look of the calendar. At the same time I need the table to be fullscreen and the top headers to be fixed as they are defined in the CSS. I managed to make this happen fine for the width of a cell using table-layout: fixed; but can't seem to get it working for the height. I've tried using white-space: nowrap; and overflow: hidden; but can't seem to make it happen.</p></div></td>
<td>50</td>
<td>50</td>

The Proof (Image)

【讨论】：