1

次のようにcss/htmlでテーブルを作成するにはどうすればよいですか:

http://i42.tinypic.com/15zp306.png

<table>タグではなく、divのみを使用したい。

コード、まだ:

<style>
.tab_in {
    display: table-cell;
    border: 1px dotted red;
    padding: 4px 6px;
}
</style>

<div style="text-align:center;">

<div class="tab_in">
<div>a</div>
<div>b</div>
</div>

<div class="tab_in" style="vertical-align:middle;">c</div>
<div class="tab_in" style="vertical-align:middle;">d</div>
<div class="tab_in" style="vertical-align:middle;">e</div>

</div>
4

2 に答える 2

1

これを実現する 1 つの方法の例を次に示します。

http://jsfiddle.net/mori57/cDEGw/1/

html:

<table class="tab_out">
    <tr>
        <td rowspan="0" class="col">
            <div class="tab_in">a</div>
            <div class="tab_in">b</div>
        </td>
        <td><div class="tab_in">c</div></td>
        <td><div class="tab_in">g</div></td>
    </tr>
    <tr>
        <td><div class="tab_in">d</div></td>
        <td><div class="tab_in">h</div></td>
    </tr>
    <tr>
        <td><div class="tab_in">e</div></td>
        <td><div class="tab_in">i</div></td>
    </tr>
    <tr>
        <td><div class="tab_in">f</div></td>
        <td><div class="tab_in">j</div></td>
    </tr>
</table>

CSS:

.tab_out {
    width: 800px;
    margin-bottom: 20px;
    text-align:center;
}
.tab_out td {
    border:1px dotted red;
    padding: 4px 6px;
    margin-bottom: 0;
    vertical-align:middle;
}
.tab_in {
    display: block;
    border: 1px dotted green;
}

これはあなたが探しているものに近いですか？この時点で、テーブルを使用せずにレイアウトを実現する効率的な方法は本当にわかりません。各 TD 内の div はオプションです。要素がテーブル内の実際に表示される場所を示すために使用しました。

于 2013-07-08T16:16:46.023 に答える