Two tables with same header width and different number of columns in one page HTML

Question

I have a basic question regarding tables and columns in HTML. I would like to have two different tables on the same page but each table with a different number of columns. First table with six columns and second with only three. Now what happens is that the columns in the second table aren't centered with the ones in the first table, they're all to the left. What to do in order that the three columns in the second table take as much place as the six columns in the first table?

Here's my code, thanks for helping

<html xmlns="http://www.w3.org/1999/xhtml">
   <body>
            <h2>title 1</h2>
       <table>
           <col class="number"></col>
           <col class="description"></col>
           <col class="reference"></col>
           <col class="candidate"></col>
           <col class="difference"></col>
           <col class="score"></col>
           <thead>
               <tr>
                   <th>column 1</th>
                   <th>column 2</th>
                   <th>column 3</th>
                   <th>column 4</th>
                   <th>column 5</th>
                   <th>column 6</th>
               </tr>
           </thead>
       </table>
               <h2>title 2</h2>
               <table>
                       <col class="number"></col>
           <col class="description"></col>
           <col class="diagram"></col>
                       <thead>
               <tr>
                   <th colspan="2">column 1</th>
                   <th>column 2</th>
                   <th>column 3</th>
               </tr>
           </thead>
               </table>
   </body>
</html>

CSS definitions

.highlight
{
   background:#f8f6f6;
}


.clicked
{
   background:#c4c0c0;
}


h2
{
   text-align:center;
}


body
{
   font-family:Times New Roman, Georgia, Serif; font-size:14px;
}


table
{
   width:100%;
   font-size:14px;
   table-layout:auto;
   border-collapse:collapse;
   background:#FFFFFF;
}


table th
{
   font-weight:bold;
   color:#FFFFFF;
   text-align:left;
   padding:7px 15px;
   background:#373736;
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#373736', endColorstr='#999a99');
   background: -moz-linear-gradient(bottom,  #999a99,  #373736);
   background: -webkit-gradient(linear, left bottom, left top, from(#999a99), to(#373736));
}


table td
{
   vertical-align:top;
   text-align:left;
   padding:7px 15px;
}

First row is fine. Second row I want to have column 1 under first row column 1, column 2 centered under columns 3 and 4 and column 3 under column 6. — A.P., Jul 24 '14 at 19:31
You should edit the question so that the question itself clearly expresses what you want. You probably need to a) set fixed widths on the columns *or* b) combine the two tables into one *or* c) let the content of the first table determine the column widths and use some JavaScript to set the column widths of the other table accordingly. — Jukka K. Korpela, Jul 24 '14 at 19:51

score 0 · Answer 1 · answered Jul 24 '14 at 19:21

0

Here they are all centered, look: jsfiddle.net/89eZ7/

answered Jul 24 '14 at 19:21

JamesB

569
1
9
31

I do not see them being centered, basically what I want is column1 to appear under column1, column2 to appear centered under column 3 and column 4 and column3 under column6. – A.P. Jul 24 '14 at 19:27
what ?!! do you want to put tables in same line ? – Farrokh Jul 24 '14 at 19:28
This is not an answer at all, just a comment. – Jukka K. Korpela Jul 24 '14 at 19:45
I tried and I can't comment yet (answers from other users-blame stackoverflow - new users should comment first, than answer!). Abou the question, it will gonna be hard work. You want to distribute text along some undefined quantify of space that is defined by the size of other table. I don't have idea how you should do it, but I am almost certain that you will need javascript for it. – JamesB Jul 24 '14 at 20:33
These guys did it using Lists and Divs: http://stackoverflow.com/questions/13505616/how-do-i-distribute-items-horizontally-with-css http://stackoverflow.com/questions/11589590/text-align-justify-inline-block-elements-properly – JamesB Jul 24 '14 at 20:58

Two tables with same header width and different number of columns in one page HTML

1 Answers1