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

【问题标题】：Table cell width of 1px, table width of 1440px表格单元格宽度为 1px，表格宽度为 1440px
【发布时间】：2013-04-26 11:07:38
【问题描述】：

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

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

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

【问题讨论】：

除了糟糕的解决方案（浏览器的性能是问题），您可以为表格设置width: 1440px，并确保您的所有单元格都有margin: 0; padding: 0。尽量不要混合使用 CSS 和 HTML4 标签（如<font>）。还要使用样式表，而不是将所有widths 和background-colors 放在每个<td> 中。

标签： html css html-table width

【解决方案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。

链接到Fiddle

【讨论】：

【解决方案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 中测试）

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

【讨论】：