Why is the text in this bullet point not lined up?

Question

I have an unordered list in a table but the text that is displayed is not in line. Theres a gap between the bullet point and the text for the first line but the second line has no gap, how do I fix this?

td{
    padding: 5px;
    text-align: left;
    font-size: 15px;
    color: white;
    width: 30px;
}
.ul{
list-style:disc inside;
}

<table>
    <tr>
        <th>HTTP</th>
        <th>TCP/IP</th>
        <th>FTP</th>
    </tr>
    <tr>
        <td><ul class="ul"><li>Used in the WWW to search</li><li>Defines how messages are formatted and transmitted</li><li>States what actions web servers 
            and browsers should take in response to various commands</li></ul></td>
        <td><ul class="ul"><li>Required in every computer to communicate</li><li>Defines address of a computer on the internet.</li><li>Defines how two computers on the 
            internet exchange data</li></ul></td>
        <td><ul class="ul"><li>Used for file transfer</li><li>Allows the upload and download of files to and from other computers on a network.</li><li>Files can be locked with a password for security</li></ul></td>
    </tr>
</table>

table{
    border-spacing: 5px;
    margin-bottom: 20px;
    margin-left: 20px;
    margin-right: 20px;
    width: 92.35%;
}

table, th, td{
    border: 1px solid white;
    border-collapse: collapse;
}

th{
    padding: 5px;
    text-align: center;
    font-size: 15px;
    color: white;
    max-width: 30%;
}

td{
    padding: 5px;
    text-align: left;
    font-size: 15px;
    color: white;
    width: 30px;
}
.ul{
list-style:disc inside;
}

<table>
    <tr>
        <th>HTTP</th>
        <th>TCP/IP</th>
        <th>FTP</th>
    </tr>
    <tr>
        <td><ul class="ul"><li>Used in the WWW to search</li><li>Defines how messages are formatted and transmitted</li><li>States what actions web servers 
            and browsers should take in response to various commands</li></ul></td>
        <td><ul class="ul"><li>Required in every computer to communicate</li><li>Defines address of a computer on the internet.</li><li>Defines how two computers on the 
            internet exchange data</li></ul></td>
        <td><ul class="ul"><li>Used for file transfer</li><li>Allows the upload and download of files to and from other computers on a network.</li><li>Files can be locked with a password for security</li></ul></td>
    </tr>
</table>

White text on a white background... please fix, either the text or the background — Peter B, Apr 19 '21 at 09:09

Minal Chauhan · Answer 1 · 2021-04-19T09:16:59.920

Instead of using inside use outside

table{
    border-spacing: 5px;
    margin-bottom: 20px;
    margin-left: 20px;
    margin-right: 20px;
    width: 92.35%;
}

table, th, td{
    border: 1px solid #000;
    border-collapse: collapse;
}

th{
    padding: 5px;
    text-align: center;
    font-size: 15px;
    color: #000;
    max-width: 30%;
}

td{
    padding: 5px;
    text-align: left;
    font-size: 15px;
    color: #000;
    width: 30px;
}

.ul{
  list-style: disc outside;
  
}

<table>
    <tr>
        <th>HTTP</th>
        <th>TCP/IP</th>
        <th>FTP</th>
    </tr>
    <tr>
        <td><ul class="ul"><li>Used in the WWW to search</li><li>Defines how messages are formatted and transmitted</li><li>States what actions web servers 
            and browsers should take in response to various commands</li></ul></td>
        <td><ul class="ul"><li>Required in every computer to communicate</li><li>Defines address of a computer on the internet.</li><li>Defines how two computers on the 
            internet exchange data</li></ul></td>
        <td><ul class="ul"><li>Used for file transfer</li><li>Allows the upload and download of files to and from other computers on a network.</li><li>Files can be locked with a password for security</li></ul></td>
    </tr>
</table>

OR You can set bullet point using :before selector

table{
    border-spacing: 5px;
    margin-bottom: 20px;
    margin-left: 20px;
    margin-right: 20px;
    width: 92.35%;
}

table, th, td{
    border: 1px solid #000;
    border-collapse: collapse;
}

th{
    padding: 5px;
    text-align: center;
    font-size: 15px;
    color: #000;
    max-width: 30%;
}

td{
    padding: 5px;
    text-align: left;
    font-size: 15px;
    color: #000;
    width: 30px;
}

.ul{
  list-style: none;
  padding: 0;
}

.ul li {
  padding-left: 15px;
  position: relative;
}

.ul li:before {
  content:"●";
  position: absolute;
  left: 0;
  font-size: 10px;
  top: 3px;
}

<table>
    <tr>
        <th>HTTP</th>
        <th>TCP/IP</th>
        <th>FTP</th>
    </tr>
    <tr>
        <td><ul class="ul"><li>Used in the WWW to search</li><li>Defines how messages are formatted and transmitted</li><li>States what actions web servers 
            and browsers should take in response to various commands</li></ul></td>
        <td><ul class="ul"><li>Required in every computer to communicate</li><li>Defines address of a computer on the internet.</li><li>Defines how two computers on the 
            internet exchange data</li></ul></td>
        <td><ul class="ul"><li>Used for file transfer</li><li>Allows the upload and download of files to and from other computers on a network.</li><li>Files can be locked with a password for security</li></ul></td>
    </tr>
</table>

Why is the text in this bullet point not lined up?

1 Answers1