Question

我想创建一个与Windows 8磁贴具有类似外观的html页面。然而，我一直坚持制作最基本的东西......桌子

我基本上想要制作一个覆盖整个屏幕的桌子，它们之间有一些间距，并且渐变作为桌子的背景。无论如何，在我看来，代码并没有听我所说的。

我说我希望细胞的高度是百分比的某个值，它只是没有。另外我希望所有单元格大小相等（例如渐变背景相等），并且不依赖于它们中的文本量。

这是一堵代码墙......

<!DOCTYPE html>
<html>

<head>
<style>

html, body
{
  height: 100%;
  width: 100%;
}

table {
    width:100%;
    height:100%;
    border-spacing: 10px;
    border-collapse: separate;
}

tr {
    width:25%
}

td {
    height:16%
}

#brightgreen_tile {
    background-image: -webkit-gradient(
        linear,
        left bottom,
        left bottom,
        color-stop(0, #17E35F),
        color-stop(0.84, #8CFFB4)
    );
    background-image: -o-linear-gradient(left bottom, #17E35F 0%, #8CFFB4 84%);
    background-image: -moz-linear-gradient(left bottom, #17E35F 0%, #8CFFB4 84%);
    background-image: -webkit-linear-gradient(left bottom, #17E35F 0%, #8CFFB4 84%);
    background-image: -ms-linear-gradient(left bottom, #17E35F 0%, #8CFFB4 84%);
    background-image: linear-gradient(to left bottom, #17E35F 0%, #8CFFB4 84%);
}
</style>
</head>


<body  bgcolor="#E6E6FA">

<table>
    <tr>
        <td align="center">
        <div id="brightgreen_tile">
            <font size="6">shizzle</font> </br> 
        </div> 
        </td>

        <td align="center">
        <div id="brightgreen_tile">
            <font size="6">shizzle</font> </br> 
        </div> 
        </td>

        <td align="center">
        <div id="brightgreen_tile">
            <font size="6">shizzle</font> </br> 
        </div> 
        </td>

        <td align="center">
        <div id="brightgreen_tile">
            <font size="6">shizzle</font> </br> 
        </div> 
        </td>

        <td align="center">
        <div id="brightgreen_tile">
            <font size="6">shizzle</font> </br> 
        </div> 
        </td>

        <td align="center">
        <div id="brightgreen_tile">
            <font size="6">shizzl1</font> </br> 
        </div> 
        </td>
    </tr>

    <tr>
        <td align="center">
        <div id="brightgreen_tile">
            <font size="6">shizzl1</font> </br> 
        </div> 
        </td>

        <td align="center">
        <div id="brightgreen_tile">
            <font size="6">shizzle</font> </br> 
        </div> 
        </td>

        <td align="center">
        <div id="brightgreen_tile">
            <font size="6">shizzle</font> </br> 
        </div> 
        </td>

        <td align="center">
        <div id="brightgreen_tile">
            <font size="6">shizzle</font> </br> 
        </div> 
        </td>

        <td align="center">
        <div id="brightgreen_tile">
            <font size="6">shizzle</font> </br> 
        </div> 
        </td>

        <td align="center">
        <div id="brightgreen_tile">
            <font size="6">shizzle</font> </br> 
        </div> 
        </td>
    </tr>

    <tr>
        <td align="center">
        <div id="brightgreen_tile">
            <font size="6">shizzle</font> </br> 
        </div> 
        </td>

        <td align="center">
        <div id="brightgreen_tile">
            <font size="6">shizzle</font> </br> 
        </div> 
        </td>

        <td align="center">
        <div id="brightgreen_tile">
            <font size="6">shizzle</font> </br> 
        </div> 
        </td>

        <td align="center">
        <div id="brightgreen_tile">
            <font size="6">shizzle</font> </br> 
        </div> 
        </td>

        <td align="center">
        <div id="brightgreen_tile">
            <font size="6">shizzle</font> </br> 
        </div> 
        </td>

        <td align="center">
        <div id="brightgreen_tile">
            <font size="6">shizzle</font> </br> 
        </div> 
        </td>
    </tr>

    <tr>
        <td align="center">
        <div id="brightgreen_tile">
            <font size="6">shizzle</font> </br> 
        </div> 
        </td>

        <td align="center">
        <div id="brightgreen_tile">
            <font size="6">shizzle</font> </br> 
        </div> 
        </td>

        <td align="center">
        <div id="brightgreen_tile">
            <font size="6">shizzle</font> </br> 
        </div> 
        </td>

        <td align="center">
        <div id="brightgreen_tile">
            <font size="6">shizzle</font> </br> 
        </div> 
        </td>

        <td align="center">
        <div id="brightgreen_tile">
            <font size="6">shizzle</font> </br> 
        </div> 
        </td>

        <td align="center">
        <div id="brightgreen_tile">
            <font size="6">shizzle</font> </br> 
        </div> 
        </td>
    </tr>
    </table>

</body>
</html>

Answer 1

html中的很多问题。但OP的答案是从TR中删除25％并将高度：100％添加到#brightgreen_tile。它应该是类而不是ID。

#brightgreen_tile {
    height:100%;    
    background-image: -webkit-gradient(linear, left bottom, left bottom, color-stop(0, #17E35F), color-stop(0.84, #8CFFB4));
    background-image: -o-linear-gradient(left bottom, #17E35F 0%, #8CFFB4 84%);
    background-image: -moz-linear-gradient(left bottom, #17E35F 0%, #8CFFB4 84%);
    background-image: -webkit-linear-gradient(left bottom, #17E35F 0%, #8CFFB4 84%);
    background-image: -ms-linear-gradient(left bottom, #17E35F 0%, #8CFFB4 84%);
    background-image: linear-gradient(to left bottom, #17E35F 0%, #8CFFB4 84%);
}

以下是Fiddle

Answer 2

尝试这个（我使用颜色：红色） - 我认为这是你想要的吗？

td {
    height:16%;
    background-color:red;
}

HTML，表格和间距问题

2 个答案: