Why don't my column headings line up?

Question

I set the same width for my column headers as my data rows. But they refuse to line up.

I made a fiddle here: http://jsfiddle.net/bwdc78tr/

Here's my CSS

html, body {
    height: 100%;
    margin: 0;
    width: 100%
}

#header {
    width: 100%;
    height: 60px;
    background-color: #013499;
    margin: 0;
}

#sidebar {
    background-color: #7690C5;
    bottom: 60px;
    float: left;
    height: calc(100% - 120px);
    top: 60px;
    width: 200px;
}

#content {
    background-color: #F2F2F2;
    bottom: 60px;
    float: left;
    height: calc(100% - 120px);
    top: 60px;
    width: calc(100% - 200px);
}

footer {
    clear: both;
    margin: -60px 0 0 0;
    width: 100%;
    height: 60px;
    background-color: #013499;
}

.buttons {
    float: right;
    margin-right: 20px;
}

#dropDownButton {
    vertical-align: -5px;
}

#WholeNumber {
    width: 135px;
}

#LookupSection {
    color: white;
    height: 60px;
    margin-left: 220px;
}

.WholeNumberCell {
    background-color: white;
    color: #000000;
}

#ImageDataTable {
    border: 1px solid black;
    border-spacing: 0;
    height: 100px;
    padding: 0;
    width: 100%;
}

.ImageDataCell {
    background-color: white;
    border: 1px solid black;
    color: #000000;
}

#WholeNumberDiv {
    margin-left: 100px;
    height: 0;
    overflow: auto;
}

.send_button {
    margin-right: 20px;
    text-align: right;
}

The table is dynamically created. I have read several sites of how to create tables but they all explain basic things. The techniques always break down when expanded upon. I can't find anything that explains more advanced things so if anyone knows any good links then please post them.

I think one problem may be that the example I am using is a staticly sized table (http://www.imaputz.com/cssStuff/bigFourVersion.html) and mine is dynamic. Any ideas on how to adapt this?

Answer 1

Several issues:

1. Your first <th> is closed with a </div> instead of the obvious. Whenver I see HTML giving very unusual and unexpected behavior, I tend to look for these issues using the W3 Validator; most of its output is irrelevant to me, but it's at least good at finding non-matching tags. Browsers often render these things in case they're minor HTML mistakes, but sometimes bad end tags can badly break the format.
2. You define width in the <th> block, but then you override it with the ancient width HTML attribute. If you want the headers to dictate the width, only set the width there.
3. This could be just jsfiddle, but the space the table was given didn't allow it to give cells their full intended width. I got it to look okay by setting width: 300%; so that it had horizontal scrollbars. You also had a typo on the "widht" property.

EDIT: As you indicated, seems there was more to it. You also had the display: block; property set on some of the elements via CSS. This overrides the element's default, which is display: table-cell; and display: table-row;, which is what gives it its signature constant-width behavior.

Answer 2

Generally you are trying to exert too much control over your table.

First, remove the inline styles from the thead > tr and tbody elements that are setting display:block. You generally don't want this when you're using tables. Just doing this will get your columns to align.

Now remove all of the inline styles setting the column widths... an easier way to to this is to use a colgroup:

<table>
  <colgroup>
    <col style="width: 50%"></col>
    <col style="width: 20%"></col>
    <col style="width: 30%"></col>
  </colgroup>
  <thead>
    <tr>
     <th>Header 1</th>
     <th>Header 2</th>
     <th>Header 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
     <td>Header 1</td>
     <td>Header 2</td>
     <td>Header 3</td>
    </tr>
  </tbody>
</table>

Now this leaves the problem that I BELIEVE you were trying to deal with from the get-go, and that is that your table data creates a table wider than your available space. You can handle this in a few ways. A couple of suggestions:

• Put the table in a container set to scroll its overflow:

 div.tableContainer {
   overflow-x: auto;
 }

• Set up the table to truncate the cell content:

table {
  table-layout: fixed;
}

td, th {
  text-overflow: ellipsis;
  overflow:hidden;
}

Generally, your goal should be to have a table with as little inline CSS as possible.

Answer 3

In your table ImageDataTable you have your thead then in the first tr you are setting the properties to display:block when it should be display: table-row Further down in your code you set tbody id="TmageDataBody" to display: block when it should be display: table-row-group;

See your updated Fiddle here