Preventing the "newline" caused by unordered list

Question

Whenever using unordered lists, it seems to start the list off "lower" than the current position:

For example:

<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
</style>
</head>
<body>

<table>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$80</td>
  </tr>
  <tr>
    <td>
    <ul>
      <li>Coffee</li>
      <li>Tea</li>
      <li>Milk</li>
    </ul>
    </td>
    <td>$80</td>
  </tr>
</table>

</body>
</html>

How do I stop the unordered list from pushing the content down? This messes up the formatting for one of my HTML reports that have sections based on table rows.

unordered lists have margins by default in css. You will need to alter your stylesheet — coagmano, Mar 26 '21 at 00:08

score 2 · Accepted Answer · answered Mar 26 '21 at 00:13

2

Put a margin: 0 on the ul like so:

ul{
   margin: 0;
}

answered Mar 26 '21 at 00:13

DumbUXEngineer

71
4

Preventing the "newline" caused by unordered list

1 Answers1