【发布时间】:2016-11-14 10:53:22
【问题描述】:
我在 td 中有一个表格,即使我将宽度设置为 100%,它也不会占用它的全宽,这是我的 html。我遇到问题的部分是 td id="day1"。
<table border="0" cellpadding="0" cellspacing="0" style="width:1190px;padding-left:6px;" ID="Table1">
<tr>
<td colspan="3" style="padding-top:5px;padding-bottom:4px;">
<table border='0' cellpadding="0" cellspacing="0" width="100%">
<tr>
<td>
<table border="0" width="100%">
<tr>
<td width="5%">Filter by:</td>
<td width="10%">
<select id='selFilter' onchange="doFilter()">
<option value="all">All</option>
<option value="units">Units</option>
<option value="assets">Assets</option>
<option value="commonareas">Common Areas</option>
</select>
</td>
<td width="5%">Workgroup:</td>
<td width="10%">
<select id='selFind' onchange="">
<option value="unit">Unit number</option>
<option value="astNumber">Asset number</option>
<option value="item">Item</option>
<option value="commonArea">Common Area</option>
</select>
</td>
<td width="2%" style="padding-left:2px; padding-right:5px;">Go</td>
<td> </td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table border="0" cellspacing="0" cellpadding="0" width="100%">
<tr>
<td id="sunHeader" align="center" height="20px" style="text-align:center;background-color:#dff3bb;font-family:Calibri">SUNDAY</td>
<td id="monHeader" align="center" height="20px" style="text-align:center;background-color:#dff3bb;font-family:Calibri">MONDAY</td>
<td id="tueHeader" align="center" height="20px" style="text-align:center;background-color:#dff3bb;font-family:Calibri">TUESDAY</td>
<td id="wedHeader" align="center" height="20px" style="text-align:center;background-color:#dff3bb;font-family:Calibri">WEDNESDAY</td>
<td id="thuHeader" align="center" height="20px" style="text-align:center;background-color:#dff3bb;font-family:Calibri">THURSDAY</td>
<td id="friHeader" align="center" height="20px" style="text-align:center;background-color:#dff3bb;font-family:Calibri">FRIDAY</td>
<td id="satHeader" align="center" height="20px" style="text-align:center;background-color:#dff3bb;font-family:Calibri">SATURDAY</td>
</tr>
<tr>
<td id="day0" height="100px" width="100px;" style="border-left:solid;border-bottom:solid;border-right:solid;border-width:thin;vertical-align:top">a</td>
<td id="day1" height="100px" width="100px;" style="border-left:solid;border-bottom:solid;border-right:solid;border-width:thin;">
<div id="day1div" style="vertical-align:top;"></div>
<table border="1" width="100%" cellspacing="0">
<tr>
<td>
<div style="background-color:#4babc5">
<img style='height: 30px;width:30px;' src='images/overdue.png' />
</div>
</td>
<td> </td>
<td>
<div style="background-color:#fecb00">
<img style='height: 30px;width:30px;' src='images/overdue.png' />
</div>
</td>
</tr>
<tr>
<td>
<div>
<img style='height: 30px;width:30px;' src='images/sr.png' />
</div>
</td>
<td>
<div>
<img style='height: 30px;width:30px;' src='images/mr.png' />
</div>
</td>
<td>
<div>
<img style='height: 30px;width:30px;' src='images/inspections.png' />
</div>
</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</td>
<td id="day2" height="100px" width="100px;" style="border-left:solid;border-bottom:solid;border-right:solid;border-width:thin;vertical-align:top">a</td>
<td id="day3" height="100px" width="100px;" style="border-left:solid;border-bottom:solid;border-right:solid;border-width:thin;vertical-align:top">a</td>
<td id="day4" height="100px" width="100px;" style="border-left:solid;border-bottom:solid;border-right:solid;border-width:thin;vertical-align:top">a</td>
<td id="day5" height="100px" width="100px;" style="border-left:solid;border-bottom:solid;border-right:solid;border-width:thin;vertical-align:top">a</td>
<td id="day6" height="100px" width="100px;" style="border-left:solid;border-bottom:solid;border-right:solid;border-width:thin;vertical-align:top">a</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
即使我将表格宽度设置为 1000 像素,它也不会占用表格单元格的整个空间。这是它出现的图像:
如果我将宽度设置为 1000 像素,表格会扩展,星期一单元格也会扩展。我希望星期一单元格的宽度严格为 100 像素。并且该单元格内的表格将占用所有空间。
我的主要目标是让表格在单元格中居中。我尝试将 align="center" 放在 td 内的表格中,但这不起作用。
【问题讨论】:
-
只是一个旁注,但在表中包含一个表并不是很好。
-
是的.. 我尽量避免这种情况。但我没有看到任何其他方法可以将这些圆圈放在完全对齐的单元格内。这就是我创建表格的原因
-
还有其他方法,但现在让我们坚持这个问题。你的例子也不完整。提供更多代码(外部表),然后您可能会更快地得到答案。对我来说,当我将它放在带有
width: 100%;的表中时,它确实会扩展。通过更多代码并显示问题,我们可以更快地为您提供帮助。 -
jsfiddle.net/wm7x2pq3 似乎工作正常。必须是一些 CSS 或其他东西。
-
似乎工作正常。一定是其他一些 CSS 正在影响。