表內沒有采取全寬tdd

我有一個表內的td和它沒有采取其全寬，即使我將寬度設置爲100％，這是我的html。我遇到問題的部分是td id =「day1」。表內沒有采取全寬tdd

<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>&nbsp;</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>&nbsp;</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>&nbsp;</td> 
 
         <td>&nbsp;</td> 
 
         <td>&nbsp;</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像素，它只是不採取表格單元格的整個空間。這裏是它出現的圖像：

如果我將寬度設置爲1000px，則表格會延伸，星期一單元格也會延伸。我希望星期一的單元格具有嚴格的100px寬度。並且該單元內的桌子將佔據所有的空間。

我的主要目標是讓表格中心位於單元格中。我試圖把表裏面的對齊=「中心」，但不起作用。

來源

2016-11-14 edsamiracle

只是一個旁註，但有一張桌子裏面的桌子不是很好。 – Ruddy

是的..我儘量避免這種情況。但我沒有看到任何其他方式讓那些圈子裏面，他們完全對齊..這就是爲什麼我創建了一個表 – edsamiracle

還有其他的方法，但讓我們現在堅持的問題。你的例子也不完整。提供更多的代碼（外表），然後你可以更快地得到答案。對我來說，當我將它放在寬度爲100％的表格中時，表格會展開。隨着更多的代碼和顯示問題，我們可以幫助你更快。 – Ruddy

試試這個。

將width="100px"屬性添加到MONDAY列頭像這樣。

<td id="monHeader" align="center" height="20px" width="100px" style="text-align:center;background-color:#dff3bb;font-family:Calibri">MONDAY</td>

和CSS

table { 
    border-spacing: 0; 
    border-collapse: collapse; 
    table-layout: fixed; 
}

來源

2016-11-14 11:28:00

我更換所有的寬度，以像素，而不是使用百分比固定的問題。感謝大家！

來源

2016-11-15 02:40:11 edsamiracle

你可以使用百分比很好，這不是真正的問題的答案。 – Ruddy

表內沒有采取全寬tdd

回答

相關問題