html - 在 HTML 中删除空单元格时保持相同的边框大小

Question

我得到了我想要的截图。然而，边界彼此相连并且变得更厚。如何保持边框大小？

这实际上是我打算让它看起来像：

演示： https ://jsfiddle.net/xnqh9d70/

<table border="1" cellspacing="0" cellpadding="0">
    <tbody>
      <tr>
        <td>Day</td>
        <td>Sun.</td>
        <td>Mon.</td>
        <td>Tues.</td>
        <td>Wed.</td>
        <td>Thu.</td>
        <td>Fri.</td>
        <td>Sat.</td>
        <td></td>
      </tr>
      <tr>
        <td>Fare(s)</td>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
        <td>6</td>
        <td>7</td>
        <td></td>
      </tr>
      <tr>
        <td>Date(s)</td>
        <td>9</td>
        <td>8</td>
        <td>7</td>
        <td>6</td>
        <td>5</td>
        <td>4</td>
        <td>3</td>
        <td>2</td>
      </tr>
    </tbody>
  </table>

CSS：

table {
    border-collapse: separate;
    empty-cells: hide;
    border: 0;
    border-color: #000000;
}

标签： htmlcsshtml-table

Answer 1

在单元格之间创建边框的一般方法是td设置元素的样式，并border-collapse: collapse;在表格上进行设置。

我还为您的空白单元格添加了一个类以删除它们的边框。

table {
  empty-cells: hide;
  border-collapse: collapse;
  border-color: #000000;
}

td {
  border: 1px solid black;
}

.empty-cell {
  border: none;
}

<table>
  <tbody>
    <tr>
      <td>Day</td>
      <td>Sun.</td>
      <td>Mon.</td>
      <td>Tues.</td>
      <td>Wed.</td>
      <td>Thu.</td>
      <td>Fri.</td>
      <td>Sat.</td>
      <td class="empty-cell"></td>
    </tr>
    <tr>
      <td>Fare(s)</td>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
      <td>7</td>
      <td class="empty-cell"></td>
    </tr>
    <tr>
      <td>Date(s)</td>
      <td>9</td>
      <td>8</td>
      <td>7</td>
      <td>6</td>
      <td>5</td>
      <td>4</td>
      <td>3</td>
      <td>2</td>
    </tr>
  </tbody>
</table>