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

Question

如何删除文本 block 之间的多余行距？ (即图像中的 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

你有一个 <br>在你的 2 p 之间每个添加额外空间的标签。只需删除它即可。

如果您想要更小的空间，您还可以降低/移除 p 上的边距标签

p {
  margin: 0;
}

并非所有 CSS 似乎都在您的问题中，因此其他样式也可能会干扰，但您可能会更改 p 的边距标记到您想要的任何内容。