6

我的老板希望我停止使用 CSS 布局并开始使用表格布局。其中一个主要因素是表格在水平放置的流畅布局中的理想行为。看这个例子：

如果您将 HTML 面板的宽度滑动得更窄，您会看到表格（第一个）有几个方便的特性：

  1. 自动寻找分割两个单元格的好位置，让内容较多的单元格占可用宽度的百分比更大。
  2. 100% 填充所有可用宽度。
  3. 在决定要包装哪些单元格时，它会以最有效的方式来处理垂直空间。
  4. 无论如何保持两个单元格水平对齐。

示例 A 没有质量 1。（如果内容大小发生变化，您必须手动更新比率。）

示例 B 没有质量 1 或 3。（静态 50% 不太理想，但可以工作。但是，它会中断为 3 行，而表格仍然只有 2 行高。）

示例 C 没有质量 2 或 4。（我可以看到用这个来伪造质量 2 的方法，但是清除到下一行完全是一个交易破坏者。）

示例 D 没有质量 1 或 4。（从技术上讲，它有 1，但两者之间的巨大差距是不切实际的。此外，在同一行上的左/右浮动在某些浏览器中效果不佳。）

由于数据不是语义表格，我真的想避免使用表格。但是我的老板付钱给我，所以我需要按照他说的去做或找到更好的解决方案。有没有办法使用语义标记和 CSS 来做到这一点？

4

3 回答 3

5

更新：对于所有浏览器 > ie7，您可以使用display: table, table-row, table-cell. jQuery 代码将以 ie7 为目标，然后将 div 替换为适当的表格元素。

如果这是您迄今为止遇到的唯一问题，那么您不应该安装一些愚蠢的网格系统来解决这个问题。这是矫枉过正和浪费时间。

http://jsfiddle.net/CoryDanielson/yuNTX/

示例 html

<div class="table width100pct">  <!-- .table should have NO style. just 'display: table' -->
    <div class="tr">
        <div class="td"></div>
        <div class="td"></div>
    </div>
</div>​
<!-- class="table, tr, td" is ONLY for changing display: table, table-row and table-cell.
you SHOULD NOT include any styles inside of these CSS selectors. These classes will 
be removed when the divs are transformed into <table>, <tr>, <td>
-->

//conditionally load the javascript patches for ie7
<!--[if IE 7]><script src="/js/IE7fixes.js"></script><![endif]-->

IE7fixes.js

$(document).ready(function(){
  //comment out the if statement to check functionality without ie7    
  if ($.browser.msie && $.browser.version == 7) {
      $('html').addClass('ie7') //<html class="ie7">.. like modernizr
      var elem, elemClass    
      $('div.table').each(function(i, elem) {
          elem = $(elem)
          elemClass = elem.removeClass('table').attr('class') || ''
          elem.wrapInner("<table class='" + elemClass + "' />").children().unwrap()
      })
      $('div.tr').each(function(i, elem) {
          elem = $(elem)
          elemClass = elem.removeClass('tr').attr('class') || ''
          elem.wrapInner("<tr class='" + elemClass + "' />").children().unwrap()
      })  
      $('div.td').each(function(i, elem) {
          elem = $(elem)
          elemClass = elem.removeClass('td').attr('class') || ''
          elem.wrapInner("<td class='" + elemClass + "' />").children().unwrap()
      })
  }                    
});​

你应该像我的那样构建你的 CSS

需要的 CSS

table, div.table { width: 100%; }
tr, div.tr { vertical-align: top; }
/* the following 3 classes will be dropped when transformed in ie7
   but that won't matter because they'll fall back to <table><td><tr>
 */
div.table { display: table; } /* NO STYLES HERE */
div.tr { display: table-row; } /* NO STYLES HERE */
div.td { display: table-cell; } /* NO STYLES HERE */
于 2012-07-11T00:48:35.203 回答
1

多年来我没有使用表格来布置网站的非表格内容，所以我可能在这里遗漏了一些东西，但我有一些替代方案和想法。

抽象一下：听起来根本问题是您的老板希望您使用一种比您当前使用的更快的 Web 开发技术，允许您实现相同的布局，并且他不关心语义标记。

我认为 CSS 或网站构建框架，如 Twitter Bootstrap 或 960gs（注意：960gs 包含在 Bootstrap 中）可用于实现相同的目标，而不是基于表格的布局。这些框架确实有一些非语义标记，例如 div 包含行和 span 来设置宽度和偏移元素，但在可访问性和非语义标记的数量方面比使用表格更好。

您还可以通过为元素提供 id 和其他类并对其进行样式设置来缓解这种情况，并且与使用基于表格的布局相比，非语义标记更少。

脱离我对根本问题的解释，像其中任何一个这样的框架还为您提供了预先设置样式的元素和一种很好地分隔元素的方法，这将节省您在整体设计 -> 代码 -> 修订周期中的时间，而这些都没有违背了 Web 开发的最佳实践。

Twitter Bootstrap 的一些资源：http:
//twitter.github.com/bootstrap/ - 有下载和良好的文档
http://twitter.github.com/bootstrap/scaffolding.html - 您将在 Bootstrap 中使用的代码示例而不是基于表格的布局

960gs（960px 宽网格系统）：
960.gs/ - 主页
https://speakerdeck.com/u/nathansmith/p/960-grid-system - 权威的 960gs 教程和使用它的原因
http://sixrevisions .com/web_design/the-960-grid-system-made-easy/ - 我第一次用来学习网页设计中的网格系统的教程

如果我最初的假设是错误的，对不起！此外，如果您有任何问题或想了解更多信息，请告诉我。

于 2012-07-11T00:50:39.537 回答
0

你有没有尝试过诸如基础之类的 CSS 框架？它胜过在表内的 td 内的表内的 td ...（：

于 2012-07-11T01:04:20.800 回答