Jump to content

Table Cell Content not Lining up


buza586

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>

Link to comment
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.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...