Jump to content
Sign in to follow this  
buza586

Table Cell Content not Lining up

Recommended Posts

I am making a site using a table with no borders to organize information on the page to display like a list.  I was having issues with td pushing the adjacent td over where as I feel they should line up as left alignment. So I copied just the table information and the padding to another page just to simplify the HTML and locate the issue.  Even with the code below, the alignment is still off.  Even if I remove the padding the alignment is off.  I have also tired changing the width of the table, no help.  The only thing that seems to work is shortening the td content.  Can anyone help me fix this? 

<!DOCTYPE html>
<html>
<style>
.table {
  padding:150px;
}
</style>
<body>
<div class="table">
  <table style="width:100%">
    <tr>
      <th>Job</th>
      <th>Food</th> 
    </tr>
    <tr>
      <td><p>Technology Teacher</p></td>
      <td><p>Lamb Karahi</p></td> 
    </tr>
    <tr>
      <td><p>Previously a Manager</p></td>
      <td><p>Pho Thai</p></td>
    </tr>
  </table>
  <table style="width:100%">
    <tr>
      <th>Movies</th>
      <th>Shows</th>  
    </tr>
    <tr>
      <td><p>Count of Monte Cristo</p></td>
      <td><p>Chopped</p></td>
    </tr>
      <td><p>Good Will Hunting</p></td>
      <td><p>West World</p></td> 
  </table>
  </div>
  </div>

</body>
</html>

Share this post


Link to post
Share on other sites

I don't see the issue you're talking about, but perhaps you're referring to the fact that two different tables have differing column widths. The width of a table and its cells is calculated by the width of the content within it. You can set the width of the left cells to a specified value and that will work as long as the content fits inside the cell.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...