在表格中的多个 <td> 中水平居中文本答案

【问题标题】：Center Text horizontally through out multiple <td> in table在表格中的多个 <td> 中水平居中文本
【发布时间】：2017-02-18 05:59:46
【问题描述】：

我有一张时间表。我想要的是，如果有两个或多个相同的任务一个接一个地出现在边界之间。（我已经这样做了）。我也希望文本在表格中间居中。

请参阅示例以进行说明：

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>

【问题讨论】：

你在找colspan
我强烈建议不要在函数中使用 o 作为增量器 - 以后（或在 SO 中）太容易将其读取为零 - 即：tds[o] vs tds[0] - 很明显当您并排看到它时，但是当您脱离上下文阅读或尝试调试时，很容易看到 tds[o] 并认为它引用了第一个 td（即索引 [0]）。只是我的 0pinion。 ....看看我在那里做了什么:)

标签： javascript jquery html css html-table

【解决方案1】：

只需删除所有

<td>Sleep</td>

并输入：-

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

【讨论】：

【解决方案2】：

使用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>

【讨论】：