中央のテキストを水平方向に複数回出力​​テーブル

Question

私はタイムテーブルであるテーブルを持っています。 私がしたいのは、2つ以上の同じタスクがお互いに行き来して境界線が来る場合です。 （これは私がやった）。また、私はテキストをテーブルの中央に配置したい。

参照例の明確化のために

https://jsfiddle.net/79bs6Lhb/3/

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>//Should Only be one "Sleep" and it should be centered through all the "Sleep td" 
 
     <td>Sleep</td> 
 
     <td>Sleep</td> 
 
     <td>Sleep</td> 
 
     <td>Sleep</td> 
 
     <td>Wake Up</td> 
 

 
    </tr> 
 
    </tbody> 
 
</table>

Answer 1

colspanを使用してください。

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 colspan="5">Sleep</td> //Should Only be one "Sleep" and it should be centered through all the "Sleep td"   
 
      <td>Wake Up</td>    
 

 
     </tr> 
 
    </tbody>

Answer 2

ちょうど

<td>Sleep</td> 

のすべてを削除し、中に入れた： -

を

<td colspan="5">Sleep</td>