Question

我希望创建一个包含1440列的表。每列代表一天中的一分钟。

我的目标是通过使用PHP设置单元格的背景颜色来显示当天每分钟发生的事情。

在我能做到这一点之前，我必须尝试将我的1440分钟的时间放到屏幕上。理想情况下，桌子的宽度为1440像素，每分钟一次。

如何格式化表格以使单元格宽度为1像素，以便整个表格只有1440像素宽？

我的语法是：

<table border=0 style="border-collapse:collapse;empty-cells: show;">
    <tr>
    <?php for ($i = 0; $i < 1440; $i++) { ?>
    <td style="width:1px; background-color:green;"></td>
    <?php } ?>
    </tr>

    <tr >
        <td colspan="120"><font size=2>6</td>
        <td colspan="120"><font size=2>8</td>
        <td colspan="120"><font size=2>10</td>
        <td colspan="120"><font size=2>12</td>
        <td colspan="120"><font size=2>14</td>
        <td colspan="120"><font size=2>16</td>
        <td colspan="120"><font size=2>18</td>
        <td colspan="120"><font size=2>20</td>
        <td colspan="120"><font size=2>22</td>
        <td colspan="120"><font size=2>24</td>
        <td colspan="120"><font size=2>02</td>
        <td colspan="120"><font size=2>04</td>
    </tr>
</table>

我理解这个解决方案很难看并使用内联样式等显示我当前的位置。

任何帮助表示赞赏。如果有关于如何做到这一点的建议，请告诉我。

Answer 1

查看以下解决方案是否适合您。

    <table border=0 style="border-collapse:collapse;empty-cells: show; width:1440px;table-layout:fixed;">
    <tr >
<td colspan="120" style="background-color:green;"><font size=2>6</td>
<td colspan="120" style="background-color:green;"><font size=2>8</td>
<td colspan="120" style="background-color:green;"><font size=2>10</td>
<td colspan="120" style="background-color:green;"><font size=2>12</td>
<td colspan="120" style="background-color:green;"><font size=2>14</td>
<td colspan="120" style="background-color:green;"><font size=2>16</td>
<td colspan="120" style="background-color:green;"><font size=2>18</td>
<td colspan="120" style="background-color:green;"><font size=2>20</td>
<td colspan="120" style="background-color:green;"><font size=2>22</td>
<td colspan="120" style="background-color:green;"><font size=2>24</td>
<td colspan="120" style="background-color:green;"><font size=2>02</td>
<td colspan="120" style="background-color:green;"><font size=2>04</td>
    </tr>
</table>

请注意，我使用了table-layout：fixed here。

链接到Fiddle

Answer 2

有点老了，但对于下一个偶然发现的人：

<style>
/* Collapse the Table borders */
table{
  border-collapse:collapse;
  empty-cells: show; 
}
/* set the size of the cells */
td{
  background-color:green;
  height:1px;
  width:1px;
}
/* just to give us something to look at
set every other one to a different color */
td:nth-child(even) {
    background-color: lightgreen;
}
</style>
<!-- Construct a table to demonstrate the styles-->
<table></table>
<script>
for(var r=1; r>=0; r--){
    $('table').append('<tr></tr>');
}
for(var c = 1440; c>=0; c--){
    $('tr').append('<td title="'+c+'"></td>');
}
</script>

http://jsfiddle.net/5beorgve/2/ （在Chrome中测试）

仍然没有解释为什么我的工作不起作用。

表格单元格宽度为1px，表格宽度为1440px

2 个答案: