HTML Table with colspan not working correctly

user_11657251 0
Viewed 779

I have 2 HTML tables with exactly the same code in both cases. I have used "colspan" there to differentiate 2 columns on the table. The main table width is colspan 65, and the columns are colspan 5 and 60 respectively. But in the 2 tables, the width of the columns are showing different.

I have tested all the codes. Both table have same code, I have used table-cell property but it is still not working. There was no specified width to any columns either.

Here is the syntax of both of my tables:

<table class="agenda-table" style="width: 100%;">
  <tbody>
    <tr class="agheader">
      <th colspan="65">Title</th>
    </tr>
    <tr>
      <td colspan="5">xxx</td>
      <td colspan="60">
        <h4>yyy</h4>
      </td>
    </tr>
    <tr>
      <td colspan="5">aaa</td>
      <td colspan="60">
        <h4>bbb</h4>
      </td>
    </tr>
    ....
  </tbody>
</table>

You can check the live page here.

You can see 2 tables are there. 1st column of both tables are of different width irrespective of same code.

Thank you for checking.

html-table html
2 Answers

Your page suffers many errors as you can see on this unicorn test result: https://validator.w3.org/unicorn/check?ucn_task=conformance&ucn_uri=https%3A%2F%2Fwww.learnx.net%2Flearnx-agenda%2F&ucn_lang=en

There are many parse errors, unclosed tags which could lead to errors like this.

Why are you using inline code if you´re using css classes to style the table?

In your pages css i´ve found this definition:

.agenda-table {
max-width: 96%;
margin: 100px auto 0;
}

so why are defining the witdh with inline code again?

style="width: 100%;"

I´ve taken your the code from your question and replaced the inline code with classes and added some css.

css example: 

* {
  margin :0;
  padding :0;
  }
 .agenda-table {
  margin : 0 auto;
  width : 100%
   }
  .agheader {
   float : left;
   width : 65%;
   background : #f442bc;
   }
   th, tr {
   float : left;
   width : 100%;
   text-align : left;
   }
   .left {
    float : left;
    width : 5%;
   border-right : 1px solid #f442bc;
   }
   .right {
   float : left;
   width : 60%;
   }

example html: 

<!DOCTYPE html>
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
 <head>
 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
 </head>
 <body>
 <table class="agenda-table">
  <tbody>
   <tr class="agheader">
    <th>Title</th>
   </tr>
  <tr>
   <td class="left">xxx</td>
   <td class="right">
    <h4>yyy</h4>
   </td>
  </tr>
  <tr>
   <td class="left">aaa</td>
   <td class="right">
    <h4>bbb</h4>
   </td>
  </tr>
 </tbody>
</table>

<table class="agenda-table">
 <tbody>
 <tr class="agheader">
   <th>Title</th>
 </tr>
 <tr>
  <td class="left">xxx</td>
  <td class="right">
    <h4>yyy</h4>
  </td>
</tr>
<tr>
  <td class="left">aaa</td>
  <td class="right">
    <h4>bbb</h4>
  </td>
 </tr>
</tbody>
</table>


</body>
</html>

Here is a fiddle that shows that this example works: https://jsfiddle.net/Thorske/bL5ktrga/11/

The float definition may not be necessary since it´s a table but this would allow to easliy switch from tables to lists.

user_113893620

Use an equal percentage width in the first row of each table. 

<table class="agenda-table" style="width: 100%;">
  <tbody>
    <tr class="agheader">
      <th style="width: 35%">xxx</th>
      <th>Title 1</th>
    </tr>
    <tr>
      <td>xxx</td>
      <td>
        <h4>yyy</h4>
      </td>
    </tr>
    <tr>
      <td>aaa</td>
      <td>
        <h4>bbb</h4>
      </td>
    </tr>
  </tbody>
</table>

<table class="agenda-table" style="width: 100%;">
  <tbody>
    <tr class="agheader">
      <th style="width: 35%">xxx</th>
      <th>Title 2</th>
    </tr>
    <tr>
      <td>xxx</td>
      <td>
        <h4>yyy</h4>
      </td>
    </tr>
    <tr>
      <td>aaa</td>
      <td>
        <h4>bbb</h4>
      </td>
    </tr>
  </tbody>
</table>

user_70231910
Related