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

我希望创建一个包含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>

6.
8.
10
12
14
16
18
20
22
24
02
04

我知道这个解决方案很难看，并且使用内联样式等来显示我当前的位置

---

谢谢你的帮助。如果有更好的建议，请告诉我。

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

    <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>

6.
8.
10
12
14
16
18
20
22
24
02
04

请注意，我使用了tablelayout:fixed

---

链接到

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

<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>

/*折叠表格边框*/
桌子{
边界塌陷：塌陷；
空单元格：显示；
}
/*设置单元格的大小*/
运输署{
背景颜色：绿色；
高度：1px；
宽度：1px；
}
/*只是给我们一些东西看看
将每一个设置为不同的颜色*/
td:n个孩子（偶数）{
背景颜色：浅绿色；
}
对于（var r=1；r>=0；r--）{
$（“表”）。追加（“”）；
}
对于（变量c=1440；c>=0；c--）{
$（'tr'）。附加（''）；
}

（镀铬测试）

仍然无法解释为什么我的不起作用。

除了糟糕的解决方案（浏览器的性能将是问题）之外，您可以为表格设置

宽度：1440px

，并确保所有单元格都有

边距：0；填充：0

。尽量不要混合使用CSS和HTML4标记（如

）。也要使用样式表，而不是将所有的

宽度和
背景色都放在每个
中。