How to remove extra white space in html table cells? - html

Question

How do I remove the extra line space between blocks of text? (i.e. January 29th and 31st cells in image).
And is there a way to remove padding from td so words could fill the cell width a little more? (i.e. "Observational" in week 2 topic cell to bottom left of image).
Here is some of the code:
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

You have a <br> between your 2 p tags on each of those that is adding extra space. Just remove that.
If you want even less space you could also lower/remove the margin on your p tags
p {
margin: 0;
}
Not all of your CSS seems to be in your question here so other styles might be interfering also, but you can likely change the margin of the p tag to whatever you'd like.

Answer 2

To remove border gap between blocks in table, you need to add border-collapse: collapse in your table style.
<table border-collapse="collapse" border="1">

Answer 3

You have a <br> between your 2 p tags, remove margin: 0 on your p tag.

Answer 4

to add from an earlier comment.
there's a few elements with default margins and padding that you can reset , you can reset these at once for all of them with : * {margin:0;padding:0;} if it bothers you to mind each element.
To set a box away from another , you can also reset margin , or padding only to the few that matters . p+p is an option to add a margin top only from the second p appearing so you can remove the <br> to be used inside a piece of text or in between inline boxes.
You can also increase line-height if that's what you want at every line of text , usually line-height:1.6em is an average value for reading confort you can use.
CSS requires : in between rules and values, not = (there was a typo for th width ).
example with line-height and the sibbling selector + to remove the br tags , also a display reset on your b tag.
* {
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>
if you want some reading :
https://developer.mozilla.org/en-US/docs/Web/CSS/line-height
The line-height CSS property sets the height of a line box. It's commonly used to set the distance between lines of text. On block-level elements, it specifies the minimum height of line boxes within the element. On non-replaced inline elements, it specifies the height that is used to calculate line box height.
https://developer.mozilla.org/en-US/docs/Web/CSS/display
The display CSS property sets whether an element is treated as a block or inline element and the layout used for its children, such as flow layout, grid or flex.
https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_combinator
The adjacent sibling combinator (+) separates two selectors and matches the second element only if it immediately follows the first element, and both are children of the same parent element.
also usefull to know : https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors
I hope this helps you find more options you can have via CSS to set for your layouts.