标签: css-tables

我正在尝试找到一种更好的方法来使用带有ASP.NET MVC的div表,我看到的问题是你需要做大量的循环,而不是一个循环,如果我不得不使用传统的<table>表.

例

<div class="column">
  <div class="row">Name</div>
    <% foreach (Person person in (List<Person>)ViewData.Model) {%>
      <div class="row"><%= Html.Encode(person.Name) %></div>
    <%} %>
  </div>
<div class="column">
  <div class="row">Email</div>
    <% foreach (Person person in (List<Person>)ViewData.Model) {%>
      <div class="row"><%= Html.Encode(person.Email) %></div>
    <%} %>
  </div>
<div class="column">
  <div class="row">Phone</div>
    <% foreach (Person person in (List<Person>)ViewData.Model) {%>
      <div class="row"><%= Html.Encode(person.Phone) %></div>
    <%} %>
  </div>

这有点难以解释，所以我会尽力：

我希望将文本内容固定在 div 的底部 - 这样无论内容有多长，它始终设置在底部。

所以如果我有：

标题
内容 1
内容 2

内容 2 将在距父 div 底部约 20px 处排列，如果我有：

标题
内容 1

即使内容较少，内容 1 也会在距父 div 底部约 20 像素的位置排列。

这可以在没有表格的情况下动态完成吗？

我正在尝试像这个网站创建开放时间.这个看起来像是在表格中完成的,但是在CSS中实现同样功能的最有效/最传统的方法是什么？

如何创建一个没有外边框但只有内边框的表.像这样的东西(参见页面右下角).我知道我可以像他们一样手动创建它,我的意思是给每个td上课,但是没有更好的方法来实现这一点吗？

我有这样一张桌子:

<table id="someID">
<tr><td>example text</td></tr>
<tr><td>example text</td><td>example text</td></tr>
<tr><td>example text</td></tr>
<tr><td>example text</td><td>example text</td></tr>
</table>

我想只使用CSS隐藏表中的第二行和第三行.这个表是预定义的,所以我不能使用id或class标签来指定要设置样式的行,我正在寻找一些针对特定行的解决方案.

如果可以用CSS完成,有人可以告诉我如何做到这一点.

我的代码笔：http ://codepen.io/leongaban/pen/iJBrn

请注意，这不适用于常规网页，我正在构建 HTML 电子邮件，但是对于现代浏览器/电子邮件客户端，拥有简单的翻转颜色（无 javascript）会很好。不知道为什么我的悬停不起作用。

我正在使用从我迄今为止发现的其他 TD 悬停 stackoverflow 问题中找到的代码。

td.blue-button:hover {
        background-color: #267aa6;
}

你会如何创造这个？

我正在设计包含几个div的网站布局.整个网站都在容器中.徽标下的所有内容都是构造的,然后我有内容包装在内容包装器中.Content-wrapper有2个子项:sidebar-wrapper和main-wrapper.我想在main-wrapper中设计一些东西,但它在firefox中没有正确显示.main和sidebar都设置为显示表格单元格,但是如果我在主包装器的右侧添加带有文本的img,则主包装器宽度会发生变化,而且比父div(内容包装器)稍微宽一些.它发生在firefox和IE(chrome工作得很好).以下是使用firefox和chrome启用的开发工具拍摄的一些图像.

铬:

火狐:

所以有没有办法让表格单元格填充父宽度或以某种方式解决这个问题？

表格元素和 CSS 显示表格之间有区别吗？通过浏览器绘制时哪个更快？

这是片段(在JsFiddle上可用的演示)

#outer {
    display: table;
    height: 200px;
    width: 100%;
    background: gray;
}

#inner {
    width: 100%;
    background: blue;
    max-height: 100%;
}

<div id="outer">
    <img id="inner" src="http://jsfiddle.net/img/logo.png">
</div>

父元素使用display:table(由第三方框架设置),并max-height:100%在子元素中设置约束.

但是,正如上面的演示中所示(我使用的是Chrome 46.0),子元素的高度以某种方式变为"ZERO".

当我删除display:table父元素中的属性时,一切正常.

我检查了MDN文档的max-height.当提到max-height的百分比值时,它说:

百分比是根据生成的框的包含块的高度计算的.如果未明确指定包含块的高度(即,它取决于内容高度),并且此元素未绝对定位,则百分比值将被视为无.

正如我对我的演示所理解的那样,#inner元素的包含块被明确指定为#outer,因此max-height: 100%属性in #inner将等效于height: 200px.这是真的吗？有没有人对我哪里出错了？

谢谢!

我正在尝试制作一个导航栏,其中按钮的文本将在垂直中心对齐.

目前,除垂直对齐外,导航栏的一切正常.

我已经尝试了很多方法,例如行高,填充到顶部和底部(弄乱我的高度以便文本div溢出),flex和表格显示.

html,
body {
  height: 100%;
  margin: 0px;
}
#nav {
  height: 10%;
  background-color: rgb(52, 152, 219);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  color: white;
  font-family: Calibri;
  font-size: 200%;
  text-align: center;
  display: flex;
}
#nav div {
  display: inline-block;
  height: 100%;
  align-items: stretch;
  flex: 1;
}
#nav div:hover {
  background-color: rgb(41, 128, 185);
  cursor: pointer;
}

<div id="main">
  <div id="nav">
    <div><a>Home</a></div>
    <div><a>Page2</a></div>
    <div><a>Page3</a></div>
    <div><a>Page4</a></div>
    <div><a>Page5</a></div>
  </div>
</div>

感谢所有帮助,谢谢!