HTML colspan issue

Question

I am having this wierd problem with using html colspan. I want to know where I am going wrong.

Below is the code snippet followed by the result when you run it:

<html>
<head>
<title>Test</title>
</head>
<body>

 <table width="100%" border="true">
   <tr>
    <td colspan=2>2 cols</td><td colspan=18>18 cols</td>
   </tr>
   <tr><td colspan=2>2 cols</td><td colspan=18>18 cols</td></tr>

  <tr>
   <td colspan=6>6 cols</td>
   <td colspan=2>2 cols</td>
   <td colspan=6>6 cols</td>
   <td colspan=6>6 cols</td>
  </tr>
  <tr>
   <td colspan=6>6 cols</td>
   <td colspan=2>2 cols</td>
   <td colspan=6>6 cols</td>
   <td colspan=6>6 cols</td>
  </tr>
  <tr>
   <td colspan=6>6 cols</td>
   <td colspan=2>2 cols</td>
   <td colspan=6>6 cols</td>
   <td colspan=6>6 cols</td>
  </tr>
  <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td><td>11</td><td>12</td><td>13</td><td>14</td><td>15</td><td>16</td><td>17</td><td>18</td><td>19</td><td>20</td></tr>
 </table>
</body>
</html>

I basically want divide the total width of table into 20 equal parts and then be able to have columns in the rows with a particular multiple of the equal parts.

My questions are:

In the last row, why are cols 1, 2 so wide compared to 3, 4, 5, 6?
In row 3, 4, 5, why is the first column not as wide as the fourth column when both are actually colspan=6?

Here's the documentation for how column widths are calculated: http://www.w3.org/TR/CSS21/tables.html#auto-table-layout — VLS, Aug 19 '15 at 02:58

score 2 · Answer 1 · answered Aug 19 '15 at 02:55

2

The layout you see is just as a result of the browser deciding to layout table cells based on their content size. To obtain a predictable result, you can specify a consistent cell size with CSS, such as:

td{width:5%;}

Here is a jsFiddle example.

answered Aug 19 '15 at 02:55

Ryan

26,884
9
56
83

Marat Tanalin · Answer 2 · 2015-08-19T03:07:37.127

1

To avoid calculating exact width and possible resulting rounding errors, you can use table-layout: fixed for the table that should have all cells having the same width:

TABLE {table-layout: fixed; }

edited Aug 19 '15 at 03:07

answered Aug 19 '15 at 03:02

Marat Tanalin

13,927
1
36
52

Thank you. This seems to be working when I set table-layout as a style to the . But I was a little worried if the generic style would be applied to the other tables that I have on the page. I kind of preferred the width:5% for this specific case. However, I am sure the table-layout trick will be helpful in some other places.
– rajugaadu Aug 19 '15 at 05:36

score 0 · Accepted Answer · edited May 23 '17 at 12:14

Hi Try the below Code,

but if you consider using divs instead of table this a great solution: HTML colspan in CSS

  <!doctype html>
<html lang="en">
<head>
 <meta charset="UTF-8">
<title>Test</title>'
<style>
td {width:5%;}
</style>

</head>
<body>
 <table width="100%" border="true">
  <tr>
    <td colspan="2">2 cols</td>
    <td colspan="18">18 cols</td>
  </tr>
  <tr>
    <td colspan="2">2 cols</td>
    <td colspan="18">18 cols</td>
  </tr>
  <tr>
    <td colspan="6">6 cols</td>
    <td colspan="2">2 cols</td>
    <td colspan="6">6 cols</td>
    <td colspan="6">6 cols</td>
  </tr>
  <tr>
    <td colspan="6">6 cols</td>
    <td colspan="2">2 cols</td>
    <td colspan="6">6 cols</td>
    <td colspan="6">6 cols</td>
  </tr>
  <tr>
    <td colspan="6">6 cols</td>
    <td colspan="2">2 cols</td>
    <td colspan="6">6 cols</td>
    <td colspan="6">6 cols</td>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
    <td>6</td>
    <td>7</td>
    <td>8</td>
    <td>9</td>
    <td>10</td>
    <td>11</td>
    <td>12</td>
    <td>13</td>
    <td>14</td>
    <td>15</td>
    <td>16</td>
    <td>17</td>
    <td>18</td>
    <td>19</td>
    <td>20</td>
  </tr>
</table>
</body>

</html>

Thank you for the answers. I used the width="5%" trick. It worked. — rajugaadu, Aug 19 '15 at 05:28

score 0 · Answer 4 · answered Aug 19 '15 at 05:22

In the last row, why are cols 1, 2 so wide compared to 3, 4, 5, 6?

Cols 1,2 take the same width as of rows 1,2 first td,after that 3,4,5,6 take the width left from 6cols width of rows 3,4,5.

So you can handle this issue by using table-layout:fixed;Css property. Here is the https://jsfiddle.net/k8863r74/ code.

HTML colspan issue

4 Answers4