Question

我一直在寻找一种用CSS生成以下HTML表的方法：

<style type="text/css">
    table.frm tr td { vertical-align: top; padding-right: 10px; }
</style>

<table class="frm">
  <tr>
    <td rowspan="2">Label 1:</td>
    <td><input type="text" /></td>
    <td rowspan="2">Label 2:</td>
    <td><input type="text" /></td>
  </tr>
  <tr>
    <td>Validation Message 1</td>
    <td>Validation Message 2</td>
  </tr>
  <tr>
    <td rowspan="2">Label 3:</td>
    <td><input type="text" /></td>
    <td rowspan="2">Label 4:</td>
    <td><input type="text" /></td>
  </tr>
  <tr>
    <td>Validation Message 3</td>
    <td>Validation Message 4</td>
  </tr>
</table>

我尝试用div替换它时遇到的问题是我无法将两列列和行对齐。我已经尝试使用浮动来对齐列，但随后我松开了行的垂直对齐方式。但是如果我使用clear来对齐行，我会松开列的水平对齐方式。

我见过的将表转换为div的许多示例都使用固定宽度或百分比宽度，但我希望布局具有相同的流体行为，因为验证消息可能会出现也可能不会出现，标签/字段也是如此将有不同的大小。

是否有设计师可以告诉我如何在没有桌子的情况下实现这种布局？

Answer 1

这不是display（CSS2）的问题，但它需要IE7 +。请参阅this example fiddle：

标记：

<form>
    <span>
        <label for="edit1">First label:</label><input id="edit1" type="text" />
        <label for="edit2">Second label:</label><input id="edit2" type="text" />
    </span>
    <span>
        <br /><p>That sounds right!</p>
        <br /><p>Problem!</p>
    </span>        
    <span>
        <label for="edit3">3:</label><input id="edit3" type="text" />
        <label for="edit4">Fourth and last label:</label><input id="edit4" type="text" />
    </span>
    <span>
        <br /><p>No succes. Try again and enter another value.</p>
        <br /><p>Wait...</p>
    </span>        
</form>

样式表：

form {
    display: table;
}
form span {
    display: table-row;
}
form span * {
    vertical-align: top;
    padding-right: 10px;
    display: table-cell;
}

Answer 2

您面临的问题是您将每个单元格视为自己的小块数据。你需要看一下更大的图景。那是什么数据集？它实际上是一个列表吗？它属于ul还是dl？

当它根本不是一个表时，退出尝试使它看起来像一个包含不同元素的表。表格永远不应用于布局。

Answer 3

流体是非常模糊的术语，流体是否意味着它的宽度可以像桌子一样扩展和收缩用于不同大小的屏幕，或者当浏览器窗口调整大小时？或者您是否希望他的列宽都调整到与具有最长/最大内容的单元格相同的宽度？

首先是这样做的

<div style="position: absolute; width: 100%;">
    <div style="position: relative; width: 100%; clear: both;">
        <div style="position: relative; width: 50%; float: left;"> </div>
        <div style="position: relative; width: 50%; float: left;"> </div>
    </div>
    <div style="position: relative; width: 100%; clear: both;">
        <div style="position: relative; width: 50%; float: left;"> </div>
        <div style="position: relative; width: 50%; float: left;"> </div>
    </div>
</div>

这应该模拟两行，每行有两列，宽度基于屏幕尺寸。

第二个列根据内容大小进行调整。

<div style="position: absolute; width: 100%;">
    <div style="position: relative; float: left;">
        <div style="position: relative; min-width: 1%; max-width: 75%;"> </div>
        <div style="position: relative; min-width: 1%; max-width: 75%;"> </div>
    </div>
    <div style="position: relative; float: left;">
        <div style="position: relative; min-width: 1%; max-width: 75%;"> </div>
        <div style="position: relative; min-width: 1%; max-width: 75%;"> </div>
    </div>
</div>

这是两列，每列有两行。将“min-width”和“max-width”设置为您需要的任何值。我认为我没有理由测试这样的东西，所以如果它不起作用，你可以尝试为每一行设置“display：inline”。

如果这两项工作都没有尝试发布您的测试代码。我确信你可以用div制作表格。几年后不使用表格我不经意间创建了一个网站，应该使用表格，而不是使用表格。你可以做什么，这只是一个工作CSS的问题。

具有流体宽度的CSS表格布局

3 个答案: