Question

我对表的样式和位置有疑问。我创建了一个带有多行的2个圆柱表，我希望它“适合”我的背景图像。因为这是对情况的相当含糊的解释，所以我已经包含了这个fiddle。

在这个小提琴中，您应该看到表格+背景图像，我希望表格项目应该介于特定背景的一部分之间。

我尝试使用

等属性设置td元素的样式

  td {
  height: 20% ; 
  }

或

 td {
 cellpadding: ... ;
 cellspacing: ... ;
 }

（不知道这些是否是我在这里可以使用的CSS属性）

但我似乎无法将表格元素放在正确的位置。任何可以帮助我的人，或者能够为我提供一些好信息的人都可以自己帮忙吗？

Answer 1

不要将表格用于布局。在这种情况下，使用列表是有意义的：

<div class="news"> <!--News-->
    <ul>
        <li><label>Friday 9-September-2011</label><a href="/news/items/090911_item1.html">item 1</a></li>
        <li><label>Friday 9-September-2011</label><a href="/news/items/090911_item2.html">item 2</a></li>
        <li><label>Friday 9-September-2011</label><a href="/news/items/090911_item3.html">item 3</a></li>                        
    </ul>

</div> <!-- / News -->

CSS：

.news ul {
    float:right;
    background-image: url('http://img64.imageshack.us/img64/3368/newsbg.png');
    width: 417px ;
    height: 186px ;
    background-repeat: no-repeat;
    padding-top:55px;
}

.news li {    
    height:38px; 
}

.news label {
    display:inline-block;
    width:230px;
}

.news a {
    display:inline-block;
    width:160px;
    text-align:right;
}

Answer 2

我认为你不应该这样做。你为什么不拿出“＆gt;＆gt;＆gt;”在图像之外，将其保存为自己的图像，然后将其包含在html（即）内联中或作为其中一行（当然居中）的背景图像。然后制作表头文本并适当地设置样式。

Answer 3

你应该为细胞找到合适的填充顶部和填充底部，或者只是对所有细胞应用固定的高度。

CSS表样式和定位

3 个答案: