0

样式.css

.headerBar table,tr,td{
    background-color: #f1f1f1;
    width: 100%;
    height: 44px;
    border: 0px;
    padding:0px;
    margin:0px; 
}

视频.html

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
        <div class="headerBar">
                <table>
                <tr>
                    <td>
                     FILL
                    </td>
                </tr>
            </table>
        </div>
    </body>
</html>

问题 1： 我希望表格跨越页面的宽度，它不会。解决了

问题 2： 我希望表格位于页面的最顶部，因此表格的上方、左侧或右侧没有边框或空白。 解决了

问题3： 有更好的方法吗？可能使用 HTML5 的新内容？

谢谢！

4

6 回答 6

1

你有width: 100%px;它应该是 width: 100%;

于 2013-08-01T18:10:19.560 回答
1

为了使它位于没有边框的顶部，填充或宽度做这样的事情：

小提琴

<div class="headerBar">
    <table>
        <tr>
            <td>FILL</td>
        </tr>
    </table>
</div>

.headerBar table, tr, td {
    background-color: #f1f1f1;
    width: 100%;
    height: 44px;
    border: 0px;
    padding:0px;
    margin:0px;
    position:fixed; /** or absolute, depending on what you are trying to accomplish **/
    top:0;
    left:0;
}

是的，您不应该将表格用于样式或布局。你可以做到同样的只是divs

<div class="headerBar">
    FILL
</div>

/ ** 编辑 ** /

要回答您的第三个问题，是的，有更好的方法可以做到这一点......它不一定涉及 HTML5，而只是良好的 HTML 实践。如果项目足够大（有时即使不是），您可以并且可能应该使用Twitter Bootstrap之类的东西，这是一个前端框架，通过包含设计概念和示例来获得你开始了。

于 2013-08-01T18:13:02.177 回答
1

首先，出于多种原因，我建议使用 adiv而不是 a table，但这只是我。

Adiv允许您做的不仅仅是table遗嘱，而且当您必须在几个月后对其进行编辑时，它的混乱程度要低得多。

网页

<header>
    <p> My text here </p>
</header>
<div class="widthS">
    <p> Whatever you are trying to put here </p>
</div>
<footer>
    <p> Copyright </p>
</footer>

CSS 页面

.widthS {
background: #f1f1f1;
width: 100%;
height: 44px;
border: 0px;
padding:0px;
margin:0px;
}

现在您可以添加一些非常有趣的 CSS 功能，例如box-shadow: 0px 1px 2px #2b2b2b;orborder-radius: 7px 7px 0 0;或opacity: 0.5;. 第一个为元素添加几乎90 度角的阴影，在顶角添加弯曲边缘，这允许元素是透明的。

于 2013-08-01T18:35:05.393 回答
0

你说你还需要2和3回答，试试这个：

body {
  margin: 0;
  padding: 0;
}

现在应该没有边界了

于 2013-08-01T18:12:46.047 回答
0

对于你的第三个问题：这取决于你想对表格做什么......如果你只是用它来给你的元素提供正确的位置，你应该使用 div-elements 和 css 代替。;)

于 2013-08-01T18:15:54.050 回答
0

对于第一个问题，您只需要这个：

.headerBar table{
    background-color: red;
    width: 100%;
    height: 44px;
    border: 0;
    padding:0;
    margin:0;
}

如果您之前不添加任何元素，则表格周围不会有任何空间。

关于第三个问题。如果它变得有点复杂，我建议你做两件事。

关注有关 html 和 css 的截屏视频或阅读一本好书，那里有很多书，只需 google 一下……最重要的是，当您对这两种语言更加熟悉时，开始使用 Zurb 的 Bootstrap 或 Foundation 之类的框架并且不要忘记查看他们的源代码。

于 2013-08-01T18:18:17.700 回答