Note that there are some explanatory texts on larger screens.

plurals
  1. POTable Columns not staying the same width
    primarykey
    data
    text
    <p>I'm working on a Calendar using tables and divs. The columns are not staying the width I set them in the CSS file. They should all be 20pxs; The Row they are in width is set to 100% and the table width is set to 100%. The Div that holds everything width is set to 1100px and has overflow set to auto.</p> <p>The columns width still try to change to fit in the row. How can I set it so all the columns in the row are 20px wide.</p> <p>CSS Code for the columns.</p> <pre><code>.WeekDay { text-align:center; background-color:transparent; width:20px; height:27px; border-color:Black; border-width:thin; border-style:solid; } .WeekendDay { text-align:center; background-color:transparent; background-image:url(http://i1005.photobucket.com/albums/af175/zombieChan51/1px_transparency.png); background-repeat:repeat; width:20px; height:27px; border-color:Black; border-width:thin; border-style:solid; } </code></pre> <p>Code for Table (This gets built by JavaScript, There's a date number and a at the end, it just didn't get copy paste from Dragon Fly.)</p> <pre><code>table cellspacing="0px" style="width:100%;"&gt; &lt;col width="20px"/&gt; &lt;tr class="DateRow"&gt; &lt;td id="January1DateColumn" class="WeekDay"&gt; &lt;td id="January2DateColumn" class="WeekendDay"&gt; &lt;td id="January3DateColumn" class="WeekendDay"&gt; &lt;td id="January4DateColumn" class="WeekDay"&gt; &lt;td id="January5DateColumn" class="WeekDay"&gt; &lt;td id="January6DateColumn" class="WeekDay"&gt; &lt;td id="January7DateColumn" class="WeekDay"&gt; &lt;td id="January8DateColumn" class="WeekDay"&gt; &lt;td id="January9DateColumn" class="WeekendDay"&gt; &lt;td id="January10DateColumn" class="WeekendDay"&gt; &lt;td id="January11DateColumn" class="WeekDay"&gt; &lt;td id="January12DateColumn" class="WeekDay"&gt; &lt;td id="January13DateColumn" class="WeekDay"&gt; &lt;td id="January14DateColumn" class="WeekDay"&gt; &lt;td id="January15DateColumn" class="WeekDay"&gt; &lt;td id="January16DateColumn" class="WeekendDay"&gt; &lt;td id="January17DateColumn" class="WeekendDay"&gt; &lt;td id="January18DateColumn" class="WeekDay"&gt; &lt;td id="January19DateColumn" class="WeekDay"&gt; &lt;td id="January20DateColumn" class="WeekDay"&gt; &lt;td id="January21DateColumn" class="WeekDay"&gt; &lt;td id="January22DateColumn" class="WeekDay"&gt; &lt;td id="January23DateColumn" class="WeekendDay"&gt; &lt;td id="January24DateColumn" class="WeekendDay"&gt; &lt;td id="January25DateColumn" class="WeekDay"&gt; &lt;td id="January26DateColumn" class="WeekDay"&gt; &lt;td id="January27DateColumn" class="WeekDay"&gt; &lt;td id="January28DateColumn" class="WeekDay"&gt; &lt;td id="January29DateColumn" class="WeekDay"&gt; &lt;td id="January30DateColumn" class="WeekendDay"&gt; &lt;td id="January31DateColumn" class="WeekendDay"&gt; &lt;/tr&gt; &lt;/table&gt; </code></pre> <p>Screen shot: <a href="http://i.stack.imgur.com/TXxPp.png" rel="nofollow">http://i.stack.imgur.com/TXxPp.png</a></p> <p>Add JavaScript snippet.</p> <pre><code>for (var dateNum in this.Months[monthNum].Days) { var Date = this.Months[monthNum].Days[dateNum]; var NewDateColumn = document.createElement('td'); NewDateColumn.id = Date.MonthName + Date.DayNum + "DateColumn"; NewDateColumn.className = "MonthTd"; NewDateColumn.innerText = Date.DayNum; if (Date.IsWeekend == true) { NewDateColumn.className = "WeekendDay"; } else if (Date.IsWeekend == false) { NewDateColumn.className = "WeekDay"; } DateRow.appendChild(NewDateColumn); } </code></pre>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload