Блог

Главная - Вопросы по программированию - Центрировать текст по горизонтали через несколько в таблице

Центрировать текст по горизонтали через несколько в таблице

#javascript #jquery #html #css #html-table

#javascript #jquery #HTML #css #html-таблица

Вопрос:

У меня есть таблица, которая является расписанием. Я хочу, чтобы две или более одинаковых задач следовали друг за другом, чтобы граница между ними проходила. (Это я сделал). Также я хочу, чтобы текст был центрирован в середине таблицы.

Смотрите Пример для пояснения:

 var tds = document.querySelectorAll("td")
for (var o = 0; o < tds.length; o  ) {
  if ($(tds[o]).next().html() === $(tds[o]).html() amp;amp; $(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>

Комментарии:

1. Вы ищете colspan

2. Я настоятельно рекомендую НЕ использовать o в качестве приращения в вашей функции — wayyyyy слишком легко прочитать его позже (или в SO) как ноль — т.е.: tds[o] vs tds[0] — очевидно, когда вы видите его рядом, но когда вы читаете его вне контекста или пытаетесьдля отладки нужно легко увидеть tds[o] и подумать, что он ссылается на первый td (т.Е. Индекс [0]). Просто мой 0pinion . …. посмотрите, что я там сделал 🙂

Ответ №1:

Использовать colspan .

 var tds = document.querySelectorAll("td")
    for (var o = 0; o < tds.length; o  ) {
            if ($(tds[o]).next().html() === $(tds[o]).html() amp;amp; $(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>

Ответ №2:

Просто удалите все

 <td>Sleep</td>

И вставляем:-

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