Home/ Questions/Q 6848683
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-27T00:53:56+00:00

I’m having some trouble getting my Table and Colspans to work. I’m trying to

  • 0

I’m having some trouble getting my Table and Colspans to work. I’m trying to create a grid that can be used as a calendar. Each ‘table’ can represent a working day period (8:30pm til 6pm).

In my design I seperated this into 38 columns, one for each 15 minute time span.

I’ve done this so that I can display non-overlapping events next to each other, and ones that conflict with an already ‘used’ cell, can be created on a new row within this table.

However, with 38 columns in my design, my colspans are not working.

My first row is set to be 19 and 19, so 50%.
My second row is set to be 38, so that’s 100%.

Yet when IE is rendering this, it’s displaying the first row as around a 30% / 70% split.

My HTML/CSS/Javascript is below:

<html>
<head>
<script type="text/javascript">
function setColSpan1(){
    var x=document.getElementById('myTable').rows[0].cells
    x[0].colSpan="1"
    x[1].colSpan="37"
}

function setColSpan2(){
    var x=document.getElementById('myTable').rows[0].cells
    x[0].colSpan="19"
    x[1].colSpan="19"
}
</script>
</head>

<body>
<style>
.column {
    font-size: 1pt;
    width: 100%;
    background-color: red;
    padding: 0px;
    margin: 0px;
    margin-bottom: 1px;
    border: 1px solid black;
    height: 10px;
}

.emptycolumn {
    font-size: 1pt;
    width: 100%;
    background-color: blue;
    padding: 0px;
    margin: 0px;
    margin-bottom: 1px;
    border: 1px solid white;
    height: 10px;
}
</style>
<table id="myTable" border="0" cellpadding="0" cellspacing="0" width="100px">
<tr>
    <td colspan="19"><div id="1" class="column" onclick="alert('test');" title="lala test"></div></td>
    <td colspan="19"><div id="2" class="emptycolumn"></div></td>
</tr>
<tr>
    <td colspan="38"><div id="3" class="column"></div></td>
</tr>
<tr>
    <td colspan="1"><div id="4" class="column"></div></td>
    <td colspan="24"><div id="5" class="emptycolumn"></div></td>
    <td colspan="13"><div id="6" class="column"></div></td>
</tr>
</table>

<form>
    <input type="button" onclick="setColSpan1()" value="Change colspan 1">
    <input type="button" onclick="setColSpan2()" value="Change colspan 2">
</form>
</body>

</html>

I started with tests originally of only 6 columns, and that seemed to work perfectly, but increasing my design to 38 has broken this.

Is my design wrong? How can I get this to work accurately? Thanks

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    it doesn’t work because the browser can’t calculate correctly width of your columns

    you need to create first row with 38 columns (without colspan), then hide it and in your functions work with next row (1st in your case)

    e.g.:

    document.getElementById('myTable').rows[1].cells

    P.S.: id attribute: Specifies a unique id for an element.

    Naming rules:

    Must begin with a letter A-Z or a-z
    Can be followed by: letters (A-Za-z), digits (0-9), hyphens (-), and underscores (_)
    In HTML, all values are case-insensitive

    and specify a DOCTYPE for your document

    • 0