Question

如何删除文本块之间多余的行距？（即 1月29日和图片中的第31个单元格）。有没有一种方法可以消除td中的填充，使单词可以填充单元格宽度呢？（即在第2周主题单元格中的“观察”位于图像的左下方）。

以下是一些代码：

th {
  width=16.66%;
  height: 30;
  text-align: center;
}

td {
  text-align: center;
  font-size: 65%;
  padding: 0;
  margin: 0;
}

table {
  table-layout: fixed;
  margin: 0;
  padding: 0;
}

<div class="table-responsive">
  <table class="table table-bordered">
    <tr>
      <th>Week</th>
      <th>Mon</th>
      <th>Tues</th>
      <th>Wed</th>
      <th>Thurs</th>
      <th>Fri</th>
    </tr>
    <tr>
      <td style="line-height:1px;margin:0;"></td>
      <td>
        <p style="font-size:95%;line-height:1px;margin:0;text-align:center;">27</p>
      </td>
      <td>
        <p style="font-size:95%;line-height:1px;margin:0;text-align:center;">28</p>
      </td>
      <td>
        <p style="font-size:95%;line-height:1px;margin:0;text-align:center;">29</p>
      </td>
      <td>
        <p style="font-size:95%;line-height:1px;margin:0;text-align:center;">30</p>
      </td>
      <td>
        <p style="font-size:95%;line-height:1px;margin:0;text-align:center;">31</p>
      </td>
    </tr>
    <tr>
      <td><b>Week 2: Chapters 2-3</b><br>(Observational Studies)</td>
      <td></td>
      <td></td>
      <td>
        <p style="color:red;font-size:100%;">HW Assignment 1 Due</p><br>
        <p style="color:blue;font-size:100%;">Chapter 2 Part 1 Prelecture Due</p>
      </td>
      <td></td>
      <td>
        <p style="color:red;font-size:100%;">HW Assignment 2 Due</p><br>
        <p style="color:blue;font-size:100%;">Chapter 2 Part 2 Prelecture Due</p>
      </td>
    </tr>
  </table>
</div>

Answer 1

每个添加额外空间的标签上的2个first = var.find_first_not_of(' '); last = var.find_last_not_of(' ');标签之间都有一个<br>。只需删除它即可。

如果您想要更少的空间，也可以降低/删除p标签上的边距

并不是所有的CSS似乎都在您的问题中，因此其他样式也可能会受到干扰，但是您可以将p { margin: 0; }标签的边距更改为所需的任何内容。

Answer 2

从先前的评论中添加。

您可以重置一些带有默认边距和填充的元素，如果您不介意每个元素，可以使用* {margin:0;padding:0;}立即为它们全部重置。

要将一个框与另一个框隔开，您还可以重设边距，或仅将边距填充为重要的几个框。 p+p是仅从出现的第二个p开始添加页边距的选项，这样您就可以删除要在文本内或内联框之间使用的<br>。

如果这是每行文本所需要的，也可以增加line-height，通常line-height:1.6em是阅读舒适度的平均值。

CSS在规则和值之间需要:，而不是= （th width处有错字）。

>

使用line-height和功能选择器+来删除br标签的示例，同时在display标签上进行b重置。

* {
  margin: 0;
  padding: 0;
}

p+p {
  margin-top: 1em;
}

b {
  display: block;
  margin-bottom: 1em;
}

th {
  width: 16.66%;
  height: 30px; /* value was missing */
  text-align: center;
  line-height: 1.6em;
}

td {
  text-align: center;
  font-size: 65%;
  padding-top:1em; 
}
table {
  table-layout: fixed;
}

<div class="table-responsive">
  <table class="table table-bordered">
    <tr>
      <th>Week</th>
      <th>Mon</th>
      <th>Tues</th>
      <th>Wed</th>
      <th>Thurs</th>
      <th>Fri</th>
    </tr>
    <tr>
      <td style="line-height:1px;margin:0;"></td>
      <td>
        <p style="font-size:95%;line-height:1px;margin:0;text-align:center;">27</p>
      </td>
      <td>
        <p style="font-size:95%;line-height:1px;margin:0;text-align:center;">28</p>
      </td>
      <td>
        <p style="font-size:95%;line-height:1px;margin:0;text-align:center;">29</p>
      </td>
      <td>
        <p style="font-size:95%;line-height:1px;margin:0;text-align:center;">30</p>
      </td>
      <td>
        <p style="font-size:95%;line-height:1px;margin:0;text-align:center;">31</p>
      </td>
    </tr>
    <tr>
      <td><b>Week 2: Chapters 2-3</b>(Observational Studies)</td>
      <td></td>
      <td></td>
      <td>
        <p style="color:red;font-size:100%;">HW Assignment 1 Due</p>
        <p style="color:blue;font-size:100%;">Chapter 2 Part 1 Prelecture Due</p>
      </td>
      <td></td>
      <td>
        <p style="color:red;font-size:100%;">HW Assignment 2 Due</p>
        <p style="color:blue;font-size:100%;">Chapter 2 Part 2 Prelecture Due</p>
      </td>
    </tr>
  </table>
</div>

如果您想阅读：

https://developer.mozilla.org/en-US/docs/Web/CSS/line-height

line-height CSS属性设置行框的高度。通常用于设置文本行之间的距离。在块级元素上，它指定元素内线框的最小height。在未替换的内联元素上，它指定用于计算线框高度的height。

https://developer.mozilla.org/en-US/docs/Web/CSS/display

display CSS属性设置将元素视为块元素还是嵌入式元素以及用于其子元素的布局，例如流布局，网格或flex。

https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_combinator

相邻的同级组合器（+）分隔两个选择器，并且仅在第二个元素紧随第一个元素之后才匹配第二个元素，并且两者都是同一父元素的子元素。

了解以下信息也很有用：https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors

我希望这可以帮助您找到更多可以通过CSS设置布局的选项。

Answer 3

要消除表格中各块之间的边界间隙，您需要以表格样式添加border-collapse: collapse。

<table border-collapse="collapse" border="1">

Answer 4

在两个<br>标签之间有一个p，请在margin: 0标签上删除p。

如何删除html表格单元格中的多余空白？

4 个答案: