CSS阻止表格单元格垂直扩展

时间：2017-03-12 21:33:30

标签： html css resize html-table cell

我正在使用CSS创建一个日历，当一个单元格中包含不同数量的文本时，它似乎无法让表格修复它的布局。理想情况下，我希望文本在超出单元格大小时被切断，而不是扩展，这会破坏日历的统一外观。同时我需要将表格全屏显示，并在CSS中定义顶部标题。我设法使用table-layout使单元格的宽度变得很好：fixed;但似乎无法让它在高空工作。我尝试过使用white-space: nowrap;和overflow: hidden;，但似乎无法实现。

任何信息都非常有用。

＆＃13;
＆＃13; 
.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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

3 个答案:

答案 0 :(得分：0)

似乎没有办法限制表格单元格的高度。您可以将表格单元格的内容包装在div中，并为div设置最大高度：

＆＃13;
＆＃13; 
.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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

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

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

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

答案 2 :(得分：-1)

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)

相关问题
最新问题