Question

我试图从一个老的项目中删除表格,但我发现一个问题,我不知道如何解决。如果我有一个表格,如,即:

<table>
    <tr>
        <td>First Row</td>
        <td>Second Row</td>
        <td>Third Row</td>
    </tr>
    <tr>
        <td>
            Some content here
        </td>
        <td>
Lorem ipsum ad his scripta blandit partiendo, eum fastidii accumsan euripidis in, eum liber hendrerit an. Qui ut wisi vocibus suscipiantur, quo dicit ridens inciderint id. Quo mundi lobortis reformidans eu, legimus senserit definiebas an eos. Eu sit tincidunt incorrupte definitionem, vis mutat affert percipit cu, eirmod consectetuer signiferumque eu per. In usu latine equidem dolores. Quo no falli viris intellegam, ut fugit veritus placerat per.
        </td>
        <td>
            Problem comes when columns have different content height
        </td>
    </tr>
    <tr>
        <td>This is aligned!</td>
        <td>With this</td>
        <td>And this!!</td>
    </tr>
</table>

每个栏中最最后一行是统一的。如何在DIV配置设计中做到这一点? 我的尝试是:,但按我的期望,它不做任何工作。

Answer 1

我同意Pavel。我仍然倾向于删除非表格数据表格(其线不一,表格数据不准确,但我不认为如此。我认为这取决于你的内容。

我将使用清单。差异也很好,但清单更容易作风格(不需要给他们课堂)。而且,如果你从表格转向零件,那么就把清单控制起来非常好,那么你就会使用这些清单。只有一个不同的选择。

<>Edit:此处更多地使用表格数据清单。资料来源:http://mirificampress.com/permalink/the_amazing_li”rel=“nofollow”http://mirificampress.com/permalink/the_amazing_li。

<>0>

Building lists that wrap into multiple columns is quick and easy with li. When data is actually tabular (requiring column header, columns, and rows), you should use a table. But when you re just looking to spice up the look of a list and make it a little easier to read, you should use this method. Just like any other set of lis, multi-column lists make for simple HTML code and easy rearranging of list items. Here s how it works.

传真:

<div id="list_wrapper">
    <ul class="multiple_columns">
        <li>One</li>
        <li>Two</li>
        <li>Three</li>
        <li>Four</li>
        <li>Five</li>
        <li>Six</li>
        <li>Seven</li>
        <li>Eight</li>
        <li>Nine</li>
    </ul>
</div>

CSS:

ul{
    margin: 0 auto;
    padding: 0;
}

/* The wider the #list_wrapper is, the more columns will fit in it */
#list_wrapper{
    width: 200px
}

/* The wider this li is, the fewer columns there will be */
    ul.multiple_columns li{
        text-align: left;
        float: left;
        list-style: none;
        height: 30px;
        width: 50px;
    }

清单中各项目在填充包装物的宽度之前,只是横向地相互对照。在这种情况下,我们有一个200px宽的包裹,每个清单项目定在50px宽。从50次增加到200次,这意味着每行就有4个清单项目。

如果你有以下具体问题,则将其带回:

Answer 2

捐助使事情变得如此复杂。如果你想要你的数据,那么为什么要删除表格? 在设计整页时,表布不准确。但是,如果你需要其特点,就想到你的决定。

Having said that, if you want align some elements horizontally then why putting them in separate divs? Put them in one div and remove "float" style on divs, so they come under each other.

Answer 3

你们必须使用集装箱作为行道,而不是作为 coll子。

友情链接