Question

根据屏幕截图，我得到了想要的东西。但是，边界相互依存并越来越厚。如何保持边框大小？

这实际上是我计划使它看起来像的样子：

<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;
}

Answer 1

这可能不是最好的解决方案，但是您可以做的是完全消除两个边界之一，然后仅在需要的元素上具有边界。

table {
    border-collapse: separate;
    empty-cells: hide;
    border: 0;
    border-color: #000000;
    border-left: 1px solid black
}

tr {
  border-bottom: none;
}

td {
  border-left: none;
}

tr:last-of-type {
  border-bottom: 1px solid black;
}

td:first-of-type {
  border-right: 1px solid black;
}

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

Answer 2

在单元格之间创建边框的一般方法是设置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>

Answer 3

empty-cells: hide;用于隐藏边框

empty-cells属性设置是否在其上显示边框表中的空白单元格。 Reference Here

您可以将CSS应用于td:empty，以隐藏空白td

，对于border-collapse: separate;情况，您需要在上一个td处手动添加border-right

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

td {
  border: 1px solid black;
}

td:empty {
  border: 0px;
}

<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></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>

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

3 个答案: