Html 溢出：指定TD和TH宽度时隐藏不工作
我需要你的帮助 我的TD单元似乎不尊重溢出：隐藏在CSS中。我已经用固定的表格布局做了所有推荐的事情，并且指定了TH和TD的宽度 有什么想法吗Html 溢出：指定TD和TH宽度时隐藏不工作,html,css,overflow,Html,Css,Overflow,我需要你的帮助 我的TD单元似乎不尊重溢出：隐藏在CSS中。我已经用固定的表格布局做了所有推荐的事情，并且指定了TH和TD的宽度 有什么想法吗 <!DOCTYPE html> <html> <head> <style type="text/css"> /*------------------------------------------------------------------ Table Style -----------------
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
/*------------------------------------------------------------------
Table Style
------------------------------------------------------------------ */
table a:link {
color: #666;
font-weight: bold;
text-decoration:none;
}
table a:visited {
color: #999999;
font-weight:bold;
text-decoration:none;
}
table a:active,
table a:hover {
color: #bd5a35;
text-decoration:underline;
}
table {
font-family:Arial, Helvetica, sans-serif;
color:#666;
font-size:12px;
background:#eaebec;
border-collapse:collapse;
border-spacing: 0;
table-layout: fixed;
}
table th {
padding:10px 10px 10px 10px;
border-bottom:1px solid #e0e0e0;
border-right: 1px solid #e0e0e0;
width: 160px;
background: #ededed;
}
table th:first-child {
text-align: left;
}
table tr:first-child th:first-child {
border-left: 0;
}
table tr {
text-align: center;
}
table td:first-child {
text-align: left;
border-left: 0;
}
table td {
padding:10px;
border-bottom:1px solid #e0e0e0;
border-right: 1px solid #e0e0e0;
background: #fafafa;
width: 130px;
}
table tr:last-child td {
border-bottom: 0;
}
table tr:hover td {
background: #f2f2f2;
}
#wrapper {
width: 740px;
height: 200px;
overflow-x: scroll;
overflow-y: scroll;
border: 1px solid rgb(205,205,205);
}
table thead {
position:fixed;
}
table td > div {
overflow: hidden;
white-space: nowrap;
}
</style>
</head>
<body>
<div id="wrapper">
<table>
<!-- Table Header -->
<thead>
<tr>
<th>Task Details</th>
<th>Firstname</th>
<th>Progress</th>
<th>Vital Task</th>
</tr>
</thead>
<!-- Table Header -->
<!-- Table Body -->
<tbody>
<tr>
<td>Create</td>
<td> </td>
<td>100%</td>
<td>Yes</td>
</tr><!-- Table Row -->
<tr>
<td>Take the dog</td>
<td> </td>
<td>100%</td>
<td>Yes</td>
</tr><!-- Darker Table Row -->
<tr>
<td>Waste half</td>
<td> </td>
<td>20%</td>
<td>No</td>
</tr>
<tr>
<td><div>Feel inferior</div></td>
<td> </td>
<td>80%</td>
<td>No</td>
</tr>
<tr>
<td><div>Some long text that shouldn't resize the box</div></td>
<td> </td>
<td>100%</td>
<td>Yes</td>
</tr>
<tr>
<td><div>Vow to complete</div></td>
<td> </td>
<td>23%</td>
<td>yes</td>
</tr>
<tr>
<td>Procrastinate</td>
<td> </td>
<td>80%</td>
<td>No</td>
</tr>
<tr>
<td><a href="#yep-iit-doesnt-exist">Hyperlink Example</a></td>
<td> </td>
<td>80%</td>
<td><a href="#inexistent-id">Another</a></td>
</tr>
</tbody>
<!-- Table Body -->
</table>
</div>
</body>
</html>
/*------------------------------------------------------------------
桌式
------------------------------------------------------------------ */
表a：链接{
颜色：#666；
字体大小：粗体；
文字装饰：无；
}
表a：参观人数{
颜色：#999999；
字体大小：粗体；
文字装饰：无；
}
表a：现行，
表a：悬停{
颜色：#bd5a35；
文字装饰：下划线；
}
桌子{
字体系列：Arial、Helvetica、无衬线字体；
颜色：#666；
字体大小：12px；
背景：#eaebec；
边界塌陷：塌陷；
边界间距：0；
表布局：固定；
}
表th{
填充：10px 10px 10px 10px；
边框底部：1px实心#e0；
右边框：1px实心#e0；
宽度：160px；
背景：#ededed；
}
表th：第一个孩子{
文本对齐：左对齐；
}
表tr：第一个孩子th：第一个孩子{
左边框：0；
}
表tr{
文本对齐：居中；
}
表td：第一个孩子{
文本对齐：左对齐；
左边框：0；
}
表td{
填充：10px；
边框底部：1px实心#e0；
右边框：1px实心#e0；
背景：#fafafa；
宽度：130px；
}
表tr：最后一个孩子td{
边界底部：0；
}
表tr：悬停td{
背景#f2f2；
}
#包装纸{
宽度：740px；
高度：200px；
溢出-x：滚动；
溢出y：滚动；
边框：1px实心rgb（205205205）；
}
餐桌{
位置：固定；
}
表td>div{
溢出：隐藏；
空白：nowrap；
}
任务详细信息
名字
进展
要务
创造
100%
对
把狗带走
100%
对
浪费一半
20%
不
自卑
80%
不
一些不应调整框大小的长文本
100%
对
立誓完成
23%
对
拖延
80%
不
80%
table td > div {
overflow: hidden;
white-space: nowrap;
}
溢出应应用于td或th，否则为div指定一个宽度，以便它可以应用溢出（此处：td>div{width:100%；溢出：hidden；}