Question

<html>
    <head>
        <style>
            table,td {border:1px solid black ;}
            table {width : 80% ;height:80%;}
            .top {vertical-align:top};
            .center {vertical-align: middle};
            .bottom {vertical-align: bottom};
        </style>
    </head>
    <body>
        <table>
            <tbody>
                <tr><td class = "top">1</td><td class = "top" "left">2</td><td class = "top" "left">3</td></tr>
                <tr><td class = "center" >4</td><td class = "center">5</td><td class = "center">6</td></tr>
                <tr><td class = "bottom">7</td><td class = "bottom">8</td><td class = "bottom">9</td></tr>
            </tbody>
        </table>
    </body>
</html>

第8行，即.bottom {vertical-align: bottom};在互联网浏览器8中工作得非常好，但即使我有最新版本，它也不适用于谷歌浏览器。

Answer 1

我认为你有一个简单的语法问题，分号应该在结束括号内。

请参阅下面的代码。

另外，将height: 100%添加到body和html以设置表格单元格高度的参考。

注意：正如其中一条发布的评论中所述，您没有为left定义CSS样式，因此不清楚您的意图。 left本身不是有效属性。

body,
html {
  height: 100%;
}
table,
td {
  border: 1px solid black;
}
table {
  width: 80%;
  height: 80%;
}
.top {
  vertical-align: top;
}
.center {
  vertical-align: middle;
}
.bottom {
  vertical-align: bottom;
}

<table>
  <tbody>
    <tr>
      <td class="top">1</td>
      <td class="top">2</td>
      <td class="top">3</td>
    </tr>
    <tr>
      <td class="center">4</td>
      <td class="center">5</td>
      <td class="center">6</td>
    </tr>
    <tr>
      <td class="bottom">7</td>
      <td class="bottom">8</td>
      <td class="bottom">9</td>
    </tr>
  </tbody>
</table>

vertical-align属性不适用于谷歌浏览器

1 个答案: