У меня возникли проблемы с работой моего стола и Colspans.Я пытаюсь создать сетку, которую можно использовать в качестве календаря.Каждая «таблица» может представлять период рабочего дня (с 8:30 до 18:00).
В моем проекте я разделил это на 38 столбцов, по одному на каждые 15 минут.
I 'мы сделали это так, чтобы я мог отображать непересекающиеся события рядом друг с другом, а те, которые конфликтуют с уже «используемой» ячейкой, могут быть созданы в новой строке в этой таблице.
Однако с 38столбцы в моем дизайне, мои colspans не работают.
Мой первый ряд настроен на 19 и 19, так что 50%.Моя вторая строка настроена на 38, так что это 100%.
Тем не менее, когда IE рендерит это, он отображает первую строку примерно как 30% / 70%.
Мой HTML / CSS / Javascript приведен ниже:
<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>
Я начал с тестов, изначально состоящих только из 6 столбцов, и это, казалось, работало идеально, но увеличение моего дизайна до 38 сломало это.
Мой дизайн неверен?Как я могу заставить это работать точно?Спасибо