1

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

我知道这个解决方案很丑陋，并且使用内联样式等只是显示我目前的位置。

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

4

2 回答 2

2

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

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

链接到小提琴

于 2013-05-02T10:28:26.940 回答
0

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

<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 中测试）

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

于 2016-03-23T22:41:44.343 回答