Question

我创建了一个使用表的动态生成的日历，可以在此处看到它的示例：http://jsfiddle.net/9bXEp/13/

我在浏览器中一致地渲染时遇到了很多麻烦，它在firefox中看起来很完美，但在chrome中完全不对齐。如果我改变css以使它在chrome中看起来很好就会搞乱firefox等。

有人可以看看并建议css吗？

此外，我不确定表是否是最好的方法吗？下面是实际生成它的代码。这两个文件应该在本地主机中运行，只需将样式表链接到主页面即可。

使用div可以做得更好吗？

生成网格的玻璃：

class Gantt {

private $start_date;
private $end_date;
private $tasks;

public function __construct($start_date, $end_date, $tasks)
{
    $this->start_date = $start_date;
    $this->end_date = $end_date;
    $this->tasks = $tasks;
    //draw the grid
    $this->draw($this->start_date, $this->end_date, $this->tasks);
}

public function draw($start_date, $end_date, $tasks){

    $time_span = $this->year_month($start_date, $end_date);
    $day_count = $this->count_days($start_date, $end_date);
    $project_length = $this->time_range($start_date, $end_date);
    echo $project_length;

    echo '<table class="main_table"><tr>';

    echo '<td class="side_bar1"><div></div></td><td class="side_bar2"><div></div></td>';

    foreach($time_span as $year => $months) {

        echo '<td class=" main_table years" colspan="'.count($months).'">'.$year.'</td>';
    }

    echo '</tr><tr>';
    echo '<td class="side_bar1"><div></div></td><td class="side_bar2"><div></div></td>';

    foreach($time_span as $months) {

        foreach($months as $month => $days){
            echo '<td class="main_table years months">'.$month.'</td>';
        }
    }
    echo '</tr><tr>';
    echo '<td><div></div></td><td class="side_bar2"><div></div></td>';
    $month_count = 0;//start month count
    foreach($time_span as $months) {
        $m=0;
        foreach($months as $days){

            echo '<td class="inner_container"><table class="main_table table_inner"><tr>';
            $i=0;
            foreach($days as $day => $d){
                if($i == 0){
                    echo '<td class="no-b"><div class="cell_width">'.$day.'</div></td>';
                }
                else {
                    echo '<td class="inner_td"><div class="cell_width">'.$day.'</div></td>';
                }
                $i++;
            }
            echo '</tr>';
            echo '<tr>';
            $i=0;
            foreach($days as $d){
                if($d == 0){
                    echo '<td class="no-b2"><div class="cell_width">'.$d[0].'</div></td>';
                }
                else {
                    echo '<td class="inner_td2"><div class="cell_width">'.$d[0].'</div></td>';
                }
                $i++;
            }
            echo '</tr></table></td>';
            $m++;
        }

        $month_count += $m; //total month count
    }

    foreach($tasks as $task){

        echo '</tr><tr><td class="task_bar1">'.$task.'</td><td class="task_bar2"></td><td class="no-b2" colspan="'.$month_count.'"><table class="main_table table_inner"><tr>';

        for ($x=0; $x< $day_count; $x++)
        {
            if($x==0){
                echo '<td class="no-b"><div class="cell_width day_block"></div></td>';
            }
            else{
                echo '<td class="inner_td"><div class="cell_width day_block"></div></td>';
            }

        }

        echo '</tr></table ></td></tr>';
    }

    echo '</table>';
}


//Returns an array containing the years, months and days between two dates
public function year_month($start_date, $end_date)
{
    $begin = new DateTime( $start_date );
    $end = new DateTime( $end_date);
    $interval = new DateInterval('P1D'); // 1 month interval
    $period = new DatePeriod($begin, $interval, $end);
    $aResult = array();

    foreach ( $period as $dt )
    {
        $aResult[$dt->format('Y')][$dt->format('F')][$dt->format('j')] = $dt->format('D');
    }

    return $aResult;
}

//Returns the total number of days between two dates
public function count_days($start_date, $end_date){

    $d1 = new DateTime($start_date);
    $d2 = new DateTime($end_date);
    $difference = $d1->diff($d2);
    return $difference->days;

}
//Returns the time span between two dates in years  months and days
public function time_range($start_date, $end_date){

    $datetime1 = new DateTime($start_date);
    $datetime2 = new DateTime($end_date);
    $interval = $datetime1->diff($datetime2);
    echo $interval->format('%y years %m months and %d days');
}

}

css：

.main_table {
   border: 1px solid #DDDDDD;
   border-collapse: collapse;
   background-color: #F6F6F6;
   color: #484A4D;
   font-family: Helvetica,Arial,sans-serif;
   line-height: 24px;
   font-size:12px;
 }
.main_table th, td {
padding: 0px;
overflow: hidden;
width: 24px;
}
.years {
text-align:center;
font-size:13px;
font-weight: bold;
}

.inner_container {
border-left:0;
}
.table_inner {
border: 0;
table-layout: fixed;
}
.no-b {
border: 1px solid #DDDDDD;
text-align:center;
border-bottom:0;
border-top:0;
border-left:0;
}
.no-b2 {
border: 1px solid #DDDDDD;
text-align:center;
border-bottom:0;
}

.inner_td {
text-align:center;
border: 1px solid #DDDDDD;
border-bottom:0;
border-top:0;

}
.inner_td2 {
text-align:center;
border: 1px solid #DDDDDD;
border-bottom:0;
}
.cell_width{
width: 25px;
height:23px;
}
.side_bar1 div {
width:110px;
}
ar2 div {
width:120px;

}
.side_bar2 {
border-right: 1px solid #DDDDDD;
}
.task_bar1, .task_bar2 {
border-top: 1px solid #DDDDDD;
padding-left:5px;
font-weight: bold;
}
.day_block {
background-color: #ffffff;
}

.inner_container:last-child .no-b2:last-child {
border-right:0;
}
.inner_container .table_inner .inner_td:last-child {
border-right: 1px solid #DDDDDD;
 }
.inner_container:last-child .inner_td:last-child {
border-right:0;
}
.table_inner .inner_td:last-child {
border-right:0;
}

主文件

 include('gantt.php');

 $tasks[0] = 'task1';
 $tasks[1] = 'task2';
 $tasks[3] = 'task3';

$gantt1 = new Gantt('2007-03-24', '2007-06-26', $tasks);

无法使这个日历网格在浏览器中保持一致

0 个答案: