Jump to content

[SOLVED] Why won't IE7 center text within a TH element?


Kinsbane

Recommended Posts

Does anyone know? No matter what I do, if I be absolutely specific with it, IE7 won't do shit.

Not even if, inside the TH element, I use the align attribute, or even if I declare the style for it in the element itself.

It just doesn't happen, and I'm at my wit's end as to why because I have a group of people who are breaking my door down, foaming at the mouth who ABSOLUTELY NEED IT CENTERED!

Someone help.. :(

 

[attachment deleted by admin]

Link to comment
Share on other sites

The point of the Table header is not to span across several columns in a single table, you need to use a nested table to do that, like done below.

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>

  <title>Centered Table Header Example</title>

</head>
<body>

<table>
  <tr>
   <th>Centered Table Header</th>
  </tr>
  <tr>
   <td>
    <table>
     <tr>
      <td>Cell 1</td>
      <td>Cell 2</td>
      <td>Cell 3</td>
      <td>Cell 4</td>
      <td>Cell 5</td>
      <td>Cell 6</td>
      <td>Cell 7</td>
      <td>Cell 8</td>
      <td>Cell 9</td>
      <td>Cell 10</td>
     </tr>
    </table>
   </td>
  </tr>
</table>

</body>
</html>

Link to comment
Share on other sites

Actually, I think he was referring to the "OS###" headers not being centered.  Which is weird because TH are centered by default.

 

@the op, you must have a text-align: left or something going on.  Look at this code.  The <TH> columns naturally centers in FF and IE.

<html>
<head>
<style type="text/css">
  body { font-family: 'Tahoma'; }
  table { margin: 0; padding: 0; width: 100%; border-collapse: collapse;}
  th { background-color: #648fe4; border-right: 1px solid #FFF;}
  tr td { background-color: #e8f0ff; border-right: 1px solid #FFF; padding: 4px;}
  tr.even td { background-color: #d8e5fe; }
  .last { border: 0px; }
</style>
</head>
<body>
<table>
  <tr>
  <th>One</th><th>Two</th><th>Three</th><th>Four</th><th>Five</th><th>Six</th><th class="last">Seven</th>
  </tr>
  <tr class="even">
    <td>Lorem</td><td>Ipsum</td><td>Lorem</td><td>Ipsum</td><td>Lorem</td><td>Ipsum</td><td class="last">Lorem</td>
  </tr>
  <tr>
    <td>Lorem</td><td>Ipsum</td><td>Lorem</td><td>Ipsum</td><td>Lorem</td><td>Ipsum</td><td class="last">Lorem</td>
  </tr>
  <tr class="even">
    <td>Lorem</td><td>Ipsum</td><td>Lorem</td><td>Ipsum</td><td>Lorem</td><td>Ipsum</td><td class="last">Lorem</td>
  </tr>
  <tr>
    <td>Lorem</td><td>Ipsum</td><td>Lorem</td><td>Ipsum</td><td>Lorem</td><td>Ipsum</td><td class="last">Lorem</td>
  </tr>
</table>
</body>
</html>

Link to comment
Share on other sites

  • 3 weeks later...

Sorry about the update on this. I guess it had to deal with the 6 different stylesheets I was using before I did a redesign. After consolidating and starting

from scratch, the TH elments in IE7 are now centered. If you go to http://www.mrv.com/product/MRV-OS-OS9000B/ and click "View product matrix" you'll see it.

 

BlueBoden, the centered purple text above the table you were seeing is the table's <caption> element.

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

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.   Restore formatting

  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.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.