Keeping the multiple lines in paragraph tag evenly aligned

Question

th {
  background-color: #d7d7d7;
  color: white;
  font-family: 'Tw Cen MT';
  font-weight: normal;
  font-size: 24px;
  padding: 25px;
  border-style: solid;
  height: 300px;
  width: 250px;
  text-align: left;
  bottom: auto;
  right: auto;
  left: auto;
  vertical-align: top;
  border-left: 14px solid white;
  border-right: 15px solid white;
  /*AVOIDS TEXT FROM GETTING UNDER BULLET ICON */
  padding-left: 53px;
  text-indent: -33px;
}


/*KEEPS THE TEXT IN LINE */

.test {
  margin: auto;
  cursor: pointer;
}

p {
  margin: auto;
}

.underline_hover:hover {
  text-decoration: underline;
}

<table>
  <tbody>
    <tr>

      <th><span class="test" style="color: black;">
    
    <!-- Heading #1 of the Column-->
    <p style="text-align: left;"><strong>Header works fine</strong></p>
    
    <!-- Bulleted points of the Column-->
    <li onclick="location.href = '#';"><span class="underline_hover">Bullet #1</span></li>

        <br>

        <!-- Heading #2 of the Column-->
        <p style="text-align: left;"><strong>This is the header that is causing problems in smaller displays </strong></p>


        <li onclick="location.href = '#';"><span class="underline_hover">Bullet #2</span></li>


        </span>
      </th>

    </tr>
  </tbody>
</table>

Hey StackOverflow community! I have been designing a table layout and I encountered a problem. The <p> tag contains heading for my table.

For the heading text: In the smaller displays, the lines proceeding the 1st line get aligned away from the alignment set up in the first line. I have tried my best to solve this problem but I was failed every single time. Any help here would be greatly appreciated.

Thanks

Answer 1

RESOLUTION:

Added the properties of margin-left and text-indent in the <p> tag in CSS and matched them with the correct indentation pixels of list icons.

th {
  background-color: #d7d7d7;
  color: white;
  font-family: 'Tw Cen MT';
  font-weight: normal;
  font-size: 24px;
  padding: 25px;
  border-style: solid;
  height: 300px;
  width: 250px;
  text-align: left;
  bottom: auto;
  right: auto;
  left: auto;
  vertical-align: top;
  border-left: 14px solid white; 
  border-right: 15px solid white;
  padding-left: 53px;
  text-indent: -33px;
  

}
 
 
 /* DO NOT CHANGE THIS PROPERTY. THIS KEEPS THE TEXT IN LINE */
 
.test { 
 margin: auto; 
 cursor:pointer;
  }


/* RESOLUTION: Added the properties of margin-left and text-indent and matched them with the indentations of list... */
p {
    margin: 0px;
    margin-left: -33px;
    padding: 0;
    text-indent: 0px;
    
}


/* Underlines the text when mouse hovers over it. */

.underline_hover:hover {
text-decoration: underline;

    
 }
 

<div>

<table> <tbody> <tr> 



<th><span class="test" style="color: black;">

<!-- Heading #1 of the Column-->
<p style="text-align: left;"><strong>Header works fine</strong></p>



<!-- Bulleted points of the Column-->
<li onclick="location.href = '#';"><span class="underline_hover">Bullet #1</span></li>

<br>

<!-- Heading #2 of the Column-->
<p style="text-align: left;"><strong>This is the header that is causing problems in smaller displays </strong></p>


<li onclick="location.href = '#';"><span class="underline_hover" >Bullet #2:
 This is a really long bullet which was causing problems in smaller displays. </span></li>


</span></th>

</tr></tbody></table>

</div>

Answer 2

Edit: Also wrap the li in inside ul and set the ul css as below:

ul {
  list-style-position: outside;
  padding-left: 25px;
}

Remove the text-indent property and set left spacing with padding-left. See code below:

th {
  background-color: #d7d7d7;
  color: white;
  font-family: 'Tw Cen MT';
  font-weight: normal;
  font-size: 24px;
  padding: 25px;
  border-style: solid;
  height: 300px;
  width: 250px;
  text-align: left;
  bottom: auto;
  right: auto;
  left: auto;
  vertical-align: top;
  border-left: 14px solid white;
  border-right: 15px solid white;
  /*AVOIDS TEXT FROM GETTING UNDER BULLET ICON */
  padding-left: 35px;
  //text-indent: -33px;
}

ul {
  list-style-position: outside;
  padding-left: 25px;
}


/*KEEPS THE TEXT IN LINE */

.test {
  margin: auto;
  cursor: pointer;
}

p {
  margin: auto;
}

.underline_hover:hover {
  text-decoration: underline;
}

<div>
   <table>
      <tbody>
         <tr>
            <th>
               <span class="test" style="color: black;">
                  <!-- Heading #1 of the Column-->
                  <p style="text-align: left;"><strong>Header works fine</strong></p>
                  <!-- Bulleted points of the Column-->
                  <ul>
                     <li onclick="location.href = '#';"><span class="underline_hover">Bullet #1</span></li>
                  </ul>
                  <br>
                  <!-- Heading #2 of the Column-->
                  <p style="text-align: left;"><strong>This is the header that is causing problems in smaller displays </strong></p>
                  <ul>
                     <li onclick="location.href = '#';"><span class="underline_hover">Bullet #2 This is a really long text that is causing problems in smaller displays.</span></li>
                  </ul>
               </span>
            </th>
         </tr>
      </tbody>
   </table>
</div>

Answer 3

If you are looking for your table to have just one column I would change your HTML to something more like this instead:

<table>
    <tbody>
        <tr>

            <!-- Heading #1 of the Column-->
            <h2>Header works fine</h2>

            <!-- Bulleted points of the Column-->
            <ul>
                <li><a href="#">Bullet</a></li>
            </ul>

        </tr>
        <tr>

            <!-- Heading #2 of the Column-->
            <h2>Header that is causing problems</h2>

            <!-- Bulleted points of the Column-->
            <ul>
                <li><a href="#">Bullet</a></li>
            </ul>

        </tr>
    </tbody>
</table>

Then simplify your CSS to just:

table {
    background-color: #d7d7d7;
    font-family: 'Tw Cen MT';
    border: 14px solid #ffffff;
    padding: 25px;
}