I have a schedule table in the form of a timetable. My goal is to have the borders between two or more consecutive tasks removed. I have achieved this. Additionally, I want the text to be centered within each cell of the table.
For clarification, refer to the example below:
var tds = document.querySelectorAll("td")
for (var o = 0; o < tds.length; o++) {
if ($(tds[o]).next().html() === $(tds[o]).html() && $(tds[o]).prev().html() === $(tds[o]).html()) {
$(tds[o]).css("borderRight", "none");
$(tds[o]).css("borderLeft", "none");
} else if ($(tds[o]).next().html() === $(tds[o]).html()) {
$(tds[o]).css("borderRight", "none");
} else if ($(tds[o]).prev().html() === $(tds[o]).html()) {
$(tds[o]).css("borderLeft", "none");
}
}table {
border-collapse: collapse;
}
td {
border: 2px solid grey;
padding: 25px;
text-align: center;
}
th {
border: 2px solid grey;
padding: 25px;
text-align: center;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<th>1:00</th>
<th>2:00</th>
<th>3:00</th>
<th>4:00</th>
<th>5:00</th>
<th>6:00</th>
</tr>
</thead>
<tbody>
<tr>
<td>Sleep</td>//There should only be one "Sleep" and it should be centered across all "Sleep td"
<td>Sleep</td>
<td>Sleep</td>
<td>Sleep</td>
<td>Sleep</td>
<td>Wake Up</td>
</tr>
</tbody>
</table>