I think the solution may involve that start of a comment without and ending. (I put arrows on the line)
<table>
<thead>
<tr class="content-table">
<!--Semesters-->
<th>Day</th></tr>
<tr class="content-table-zero"><th>Time</th></tr>
<tr class="content-table-one"><th>1st Year 1st Sem</th></tr>
<tr class="content-table-two"><th>1st Year 2nd Sem</th></tr>
<tr class="content-table-three"><th>1st Year 3rd Sem</th></tr>
<tr class="content-table-four"><th>2nd Year 1st Sem</th></tr>
>>>>> <!--<tr class="content-table-five"><th>2nd Year 3rd Sem</th></tr>
<tr class="content-table-six"><th>3rd Year 1st Sem</th></tr>
It looks like this happens in numerous places, so I suggest you look through all of your code
I have created a table using Html, CSS and javascript. I made the first cells displaying the days of the week and semesters separately, but the other cells are joint. The problems appear when I enter the data manually through the code or by click. The cells keep expanding. Can someone show me where I’ve gone wrong with my code? I don’t want the cells to expand when I’m entering data.
These are the images.https://ibb.co/NWdf0Rs https://ibb.co/WzVjP0L.
The CSS file is here: https://easyupload.io/z7g1fh
<table>
<thead>
<!--Semesters-->
<tr class="content-table"><th>Day</th></tr>
<tr class="content-table-zero"><th>Time</th></tr>
<tr class="content-table-one"><th>1st Year 1st Sem</th></tr>
<tr class="content-table-two"><th>1st Year 2nd Sem</th></tr>
<tr class="content-table-three"><th>1st Year 3rd Sem</th></tr>
<tr class="content-table-four"><th>2nd Year 1st Sem</th></tr>
<!--D.T.WK-->
<tr class="content-table-days"><th><h6>MONDAY</h6></th></tr>
<tr class="content-table-tuesday"><th><h6>TUESDAY</h6></th></tr>
<tr class="content-table-wednesday"><th><h6>WEDNESDAY</h6></th></tr>
<tr class="content-table-thursday"><th><h6>THURSDAY</h6></th></tr>
<tr class="content-table-friday"><th><h6>FRIDAY</h6></th></tr>
<tr class="content-table-saturday"><th><h6>SATURDAY</h6></th></tr>
<tr class="content-table-sunday"><th><h6>SUNDAY</h6></th></tr>
<!--Units-->
<!--Monday-->
<tr class="table-content">
<td class="content-units"><h5>8 - 10</h5><td>
<td class="content-units-2"><h5></h5><td>
<td class="content-units-3"><h5></h5><td>
<td class="content-units-4"><h5></h5><td>
<td class="content-units-5"><h5></h5><td>
</tr>
<tr class="table-content-2">
<td class="content-units" ><h5>10-12</h5><td>
<td class="content-units-2"><h5></h5><td>
<td class="content-units-3"><h5></h5><td>
<td class="content-units-4"><h5></h5><td>
<td class="content-units-5"><h5></h5><td>
</tr>
<tr class="table-content-3">
<td class="content-units" ><h5>12 - 1</h5><td>
<td class="content-units-2"><h5></h5><td>
<td class="content-units-3"><h5></h5><td>
<td class="content-units-4"><h5></h5><td>
<td class="content-units-5"><h5></h5><td>
</tr>
<tr class="table-content-4">
<td class="content-units" ><h5>9 - 10</h5><td>
<td class="content-units-2"><h5></h5><td>
<td class="content-units-3"><h5></h5><td>
<td class="content-units-4"><h5></h5><td>
<td class="content-units-5"><h5></h5><td>
</tr>
<!--Monday End-->
<!--Tuesday-->
<tr class="table-content-5">
<td class="content-units" ><h5>9 - 10</h5><td>
<td class="content-units-2"><h5></h5><td>
<td class="content-units-3"><h5></h5><td>
<td class="content-units-4"><h5></h5><td>
<td class="content-units-5"><h5></h5><td>
</tr>
<tr class="table-content-6">
<td class="content-units" ><h5>9 - 10</h5><td>
<td class="content-units-2"><h5></h5><td>
<td class="content-units-3"><h5></h5><td>
<td class="content-units-4"><h5></h5><td>
<td class="content-units-5"><h5></h5><td>
</tr>
<tr class="table-content-7">
<td class="content-units" ><h5>9 - 10</h5><td>
<td class="content-units-2"><h5></h5><td>
<td class="content-units-3"><h5></h5><td>
<td class="content-units-4"><h5></h5><td>
<td class="content-units-5"><h5></h5><td>
</tr>
<tr class="table-content-8">
<td class="content-units" ><h5>9 - 10</h5><td>
<td class="content-units-2"><h5></h5><td>
<td class="content-units-3"><h5></h5><td>
<td class="content-units-4"><h5></h5><td>
<td class="content-units-5"><h5></h5><td>
</tr>
<tr class="table-content-9">
<td class="content-units" ><h5>9 - 10</h5><td>
<td class="content-units-2"><h5></h5><td>
<td class="content-units-3"><h5></h5><td>
<td class="content-units-4"><h5></h5><td>
<td class="content-units-5"><h5></h5><td>
</tr>
<tr class="table-content-10">
<td class="content-units" ><h5>9 - 10</h5><td>
<td class="content-units-2"><h5></h5><td>
<td class="content-units-3"><h5></h5><td>
<td class="content-units-4"><h5></h5><td>
<td class="content-units-5"><h5></h5><td>
</tr>
<!--Tuesday End-->
<!--Wednesday-->
<tr class="table-content-11">
<td class="content-units" ><h5>9 - 10</h5><td>
<td class="content-units-2"><h5></h5><td>
<td class="content-units-3"><h5></h5><td>
<td class="content-units-4"><h5></h5><td>
<td class="content-units-5"><h5></h5><td>
</tr>
<tr class="table-content-12">
<td class="content-units" ><h5>9 - 10</h5><td>
<td class="content-units-2"><h5></h5><td>
<td class="content-units-3"><h5></h5><td>
<td class="content-units-4"><h5></h5><td>
<td class="content-units-5"><h5></h5><td>
</tr>
<tr class="table-content-13">
<td class="content-units" ><h5>9 - 10</h5><td>
<td class="content-units-2"><h5></h5><td>
<td class="content-units-3"><h5></h5><td>
<td class="content-units-4"><h5></h5><td>
<td class="content-units-5"><h5></h5><td>
</tr>
<tr class="table-content-14">
<td class="content-units" ><h5>9 - 10</h5><td>
<td class="content-units-2"><h5></h5><td>
<td class="content-units-3"><h5></h5><td>
<td class="content-units-4"><h5></h5><td>
<td class="content-units-5"><h5></h5><td>
</tr>
<tr class="table-content-15">
<td class="content-units" ><h5>9 - 10</h5><td>
<td class="content-units-2"><h5></h5><td>
<td class="content-units-3"><h5></h5><td>
<td class="content-units-4"><h5></h5><td>
<td class="content-units-5"><h5></h5><td>
</tr>
<!--Wednesday End-->
<!--Thursday-->
<tr class="table-content-16">
<td class="content-units" ><h5>9 - 10</h5><td>
<td class="content-units-2"><h5></h5><td>
<td class="content-units-3"><h5></h5><td>
<td class="content-units-4"><h5></h5><td>
<td class="content-units-5"><h5></h5><td>
</tr>
<tr class="table-content-17">
<td class="content-units" ><h5>9 - 10</h5><td>
<td class="content-units-2"><h5></h5><td>
<td class="content-units-3"><h5></h5><td>
<td class="content-units-4"><h5></h5><td>
<td class="content-units-5"><h5></h5><td>
</tr>
<tr class="table-content-18">
<td class="content-units" ><h5>9 - 10</h5><td>
<td class="content-units-2"><h5></h5><td>
<td class="content-units-3"><h5></h5><td>
<td class="content-units-4"><h5></h5><td>
<td class="content-units-5"><h5></h5><td>
</tr>
<tr class="table-content-19">
<td class="content-units" ><h5>9 - 10</h5><td>
<td class="content-units-2"><h5></h5><td>
<td class="content-units-3"><h5></h5><td>
<td class="content-units-4"><h5></h5><td>
<td class="content-units-5"><h5></h5><td>
</tr>
<tr class="table-content-20">
<td class="content-units" ><h5>9 - 10</h5><td>
<td class="content-units-2"><h5></h5><td>
<td class="content-units-3"><h5></h5><td>
<td class="content-units-4"><h5></h5><td>
<td class="content-units-5"><h5></h5><td>
</tr>
<!--Thursday End-->
<!--Friday-->
<tr class="table-content-21">
<td class="content-units" ><h5>9 - 10</h5><td>
<td class="content-units-2"><h5></h5><td>
<td class="content-units-3"><h5></h5><td>
<td class="content-units-4"><h5></h5><td>
<td class="content-units-5"><h5></h5><td>
</tr>
<tr class="table-content-22">
<td class="content-units" ><h5>9 - 10</h5><td>
<td class="content-units-2"><h5></h5><td>
<td class="content-units-3"><h5></h5><td>
<td class="content-units-4"><h5></h5><td>
<td class="content-units-5"><h5></h5><td>
</tr>
<tr class="table-content-23">
<td class="content-units" ><h5>9 - 10</h5><td>
<td class="content-units-2"><h5></h5><td>
<td class="content-units-3"><h5></h5><td>
<td class="content-units-4"><h5></h5><td>
<td class="content-units-5"><h5></h5><td>
</tr>
<tr class="table-content-24">
<td class="content-units" ><h5>9 - 10</h5><td>
<td class="content-units-2"><h5></h5><td>
<td class="content-units-3"><h5></h5><td>
<td class="content-units-4"><h5></h5><td>
<td class="content-units-5"><h5></h5><td>
</tr>
<tr class="table-content-25">
<td class="content-units" ><h5>9 - 10</h5><td>
<td class="content-units-2"><h5></h5><td>
<td class="content-units-3"><h5></h5><td>
<td class="content-units-4"><h5></h5><td>
<td class="content-units-5"><h5></h5><td>
</tr>
<!--Friday End-->
<!--Saturday-->
<tr class="table-content-26">
<td class="content-units" ><h5>9 - 10</h5><td>
<td class="content-units-2"><h5></h5><td>
<td class="content-units-3"><h5></h5><td>
<td class="content-units-4"><h5></h5><td>
<td class="content-units-5"><h5></h5><td>
</tr>
<tr class="table-content-27">
<td class="content-units" ><h5>9 - 10</h5><td>
<td class="content-units-2"><h5></h5><td>
<td class="content-units-3"><h5></h5><td>
<td class="content-units-4"><h5></h5><td>
<td class="content-units-5"><h5></h5><td>
</tr>
<tr class="table-content-28">
<td class="content-units" ><h5>9 - 10</h5><td>
<td class="content-units-2"><h5></h5><td>
<td class="content-units-3"><h5></h5><td>
<td class="content-units-4"><h5></h5><td>
<td class="content-units-5"><h5></h5><td>
</tr>
<tr class="table-content-29">
<td class="content-units" ><h5>9 - 10</h5><td>
<td class="content-units-2"><h5></h5><td>
<td class="content-units-3"><h5></h5><td>
<td class="content-units-4"><h5></h5><td>
<td class="content-units-5"><h5></h5><td>
</tr>
<tr class="table-content-30">
<td class="content-units" ><h5>9 - 10</h5><td>
<td class="content-units-2"><h5></h5><td>
<td class="content-units-3"><h5></h5><td>
<td class="content-units-4"><h5></h5><td>
<td class="content-units-5"><h5></h5><td>
</tr>
<!--Saturday End-->
<!--Sunday -->
<tr class="table-content-31">
<td class="content-units" ><h5>9 - 10</h5><td>
<td class="content-units-2"><h5></h5><td>
<td class="content-units-3"><h5></h5><td>
<td class="content-units-4"><h5></h5><td>
<td class="content-units-5"><h5></h5><td>
</tr>
<tr class="table-content-32">
<td class="content-units" ><h5>9 - 10</h5><td>
<td class="content-units-2"><h5></h5><td>
<td class="content-units-3"><h5></h5><td>
<td class="content-units-4"><h5></h5><td>
<td class="content-units-5"><h5></h5><td>
</tr>
<tr class="table-content-33">
<td class="content-units" ><h5>9 - 10</h5><td>
<td class="content-units-2"><h5></h5><td>
<td class="content-units-3"><h5></h5><td>
<td class="content-units-4"><h5></h5><td>
<td class="content-units-5"><h5></h5><td>
</tr>
<tr class="table-content-34">
<td class="content-units" ><h5>9 - 10</h5><td>
<td class="content-units-2"><h5></h5><td>
<td class="content-units-3"><h5></h5><td>
<td class="content-units-4"><h5></h5><td>
<td class="content-units-5"><h5></h5><td>
</tr>
<tr class="table-content-35">
<td class="content-units" ><h5>9 - 10</h5><td>
<td class="content-units-2"><h5></h5><td>
<td class="content-units-3"><h5></h5><td>
<td class="content-units-4"><h5></h5><td>
<td class="content-units-5"><h5></h5><td>
</tr>
</thead>
<script type="text/javascript">
$("td").click(function(event) {
/*Act on the event */
event.stopPropagation();
$("table textarea").each(function(index, el) {
w = $(el).outerWidth();
text = $(el).val();
if(text == ''){
$(el).parent("td").html('<div style="position: relative; padding:0 6px; top: -10px; width: '+w+'px; height: 53px; border:1px solid #000; overflow-y: auto; word-wrap: break-word;">'+text+'</div>');
}
else{
$(el).parent("td").html('<div style="position: relative; padding:0 6px; top: -46px; width: '+w+'px; height: 53px; border:1px solid #000; overflow-y: auto;word-wrap: break-word;">'+text+'</div>');
}
});
w = $(this).outerWidth();
$(this).html('<textarea onclick="fun(event)" style="resize: none; position: relative; top: -11px; width: '+w+'px; height: 53px; border:1px solid #000;"></textarea>');
});
$(window).click(function(event) {
/* Act on the event */
$("table textarea").each(function(index, el) {
w = $(el).outerWidth();
text = $(el).val();
if(text == ''){
$(el).parent("td").html('<div style="position: relative; padding:0 6px; top: -11px; width: '+w+'px; height: 50px; border:1px solid #000; overflow-y: auto; word-wrap: break-word;">'+text+'</div>');
}
else{
$(el).parent("td").html('<div style="position: relative; padding:0 6px; top: -46px; width: '+w+'px; height: 50px; border:1px solid #000; overflow-y: auto; word-wrap: break-word;">'+text+'</div>');
}
});
});
function fun(e){
e.stopPropagation();
e.preventDefault();
}
</script>
Welcome to stackoverflow! It’s probably your CSS that’s causing this (but I don’t know because it’s not available). You probably have a size or position setting that is relative (e.g. a %) and this is causing it to shift as things are entered. I would start by testing your CSS.
All the positions are fixed. I couldn’t upload the CSS because I was over the word count. But you can look at the CSS here.
@Spirit Bruh, the css file is a mess. You should put all the similar properties in one class and use IDs for the transforms. Also what are the transforms for? I’m having trouble envisioning what this is supposed to look like. I am trying to recreate what you have, but I am missing some styling or something beyond the style.css
