html - 複数のテーブルをフローティング

Question

テーブルを浮かせて少し立ち往生しています。削除したい2つのテーブルの間にギャップができてしまいます。2つの垂直テーブル間のギャップを取り除く方法を誰かが説明できますか？

これが私が見ているものと正しくないものの例です（ギャップ）：

ここに画像の説明を入力してください

HTML：

<head>
    <meta charset="UTF-8" />
    <link href="css/main.css" type="text/css" rel="stylesheet">
</head>

<body>
<table class="spec-table">
    <tbody>
        <tr class="spec-name">
            <td>Technical details</td>
        </tr>
        <tr class="spec-features">
            <td class="spec-features-name">TV tuner integrated</td>
            <td class="spec-features-value">N</td>
        <tr>
        <tr class="spec-features">
            <td class="spec-features-name">Cooling type</td>
            <td class="spec-features-value">active</td>
        <tr>
        <tr class="spec-features">
            <td class="spec-features-name">Form factor</td>
            <td class="spec-features-value">ATX</td>
        <tr>
        <tr class="spec-features">
            <td class="spec-features-name">Number of processors installed</td>
            <td class="spec-features-value">1</td>
        <tr>
        <tr class="spec-features">
            <td class="spec-features-name">Fill rate</td>
            <td class="spec-features-value">28.8 billion texels/sec</td>
        <tr>
        <tr class="spec-features">
            <td class="spec-features-name">Graphics adapter family</td>
            <td class="spec-features-value">NVIDIA</td>
        <tr>
        <tr class="spec-features">
            <td class="spec-features-name">Maximum operating temperature</td>
            <td class="spec-features-value">98 °C</td>
        <tr>
    </tbody>
</table>
<table class="spec-table">
    <tbody>
        <tr class="spec-name">
            <td>Processor</td>
        </tr>
        <tr class="spec-features">
            <td class="spec-features-name">Graphics processor</td>
            <td class="spec-features-value">GeForce GT 640</td>
        <tr>
        <tr class="spec-features">
            <td class="spec-features-name">Maximum resolution</td>
            <td class="spec-features-value">2560 x 1600 pixels</td>
        <tr>
        <tr class="spec-features">
            <td class="spec-features-name">Graphics processor family</td>
            <td class="spec-features-value">NVIDIA</td>
        <tr>
        <tr class="spec-features">
            <td class="spec-features-name">Processor clock speed</td>
            <td class="spec-features-value">901 MHz</td>
        <tr>
        <tr class="spec-features">
            <td class="spec-features-name">Shader clock</td>
            <td class="spec-features-value">1802 MHz</td>
        <tr>
        <tr class="spec-features">
            <td class="spec-features-name">Graphics adapter RAMDAC</td>
            <td class="spec-features-value">400 MHz</td>
        <tr>
        <tr class="spec-features">
            <td class="spec-features-name">Parallel processing technology support</td>
            <td class="spec-features-value">N</td>
        <tr>
        <tr class="spec-features">
            <td class="spec-features-name">Maximum analog resolution</td>
            <td class="spec-features-value">2048 x 1536 pixels</td>
        <tr>
        <tr class="spec-features">
            <td class="spec-features-name">Maximum digital resolution</td>
            <td class="spec-features-value">2560 x 1600 pixels</td>
        <tr>
        <tr class="spec-features">
            <td class="spec-features-name">Stream processors</td>
            <td class="spec-features-value">384</td>
        <tr>
    </tbody>
</table>
<table class="spec-table">
    <tbody>
        <tr class="spec-name">
            <td>Memory</td>
        </tr>
        <tr class="spec-features">
            <td class="spec-features-name">Discrete graphics adapter memory</td>
            <td class="spec-features-value">2048 MB</td>
        <tr>
        <tr class="spec-features">
            <td class="spec-features-name">Graphics adapter memory type</td>
            <td class="spec-features-value">DDR3-SDRAM</td>
        <tr>
        <tr class="spec-features">
            <td class="spec-features-name">Memory bus</td>
            <td class="spec-features-value">128 bit</td>
        <tr>
        <tr class="spec-features">
            <td class="spec-features-name">Memory clock speed</td>
            <td class="spec-features-value">1782 MHz</td>
        <tr>
        <tr class="spec-features">
            <td class="spec-features-name">Memory bandwidth (max)</td>
            <td class="spec-features-value">28.5 GB/s</td>
        <tr>
    </tbody>
</table>
<table class="spec-table">
    <tbody>
        <tr class="spec-name">
            <td>System requirements</td>
        </tr>
        <tr class="spec-features">
            <td class="spec-features-name">Mac compatibility</td>
            <td class="spec-features-value">N</td>
        <tr>
        <tr class="spec-features">
            <td class="spec-features-name">Minimum system power supply</td>
            <td class="spec-features-value">350 W</td>
        <tr>
    </tbody>
</table>
<table class="spec-table">
    <tbody>
        <tr class="spec-name">
            <td>Ports & interfaces</td>
        </tr>
        <tr class="spec-features">
            <td class="spec-features-name">Interface type</td>
            <td class="spec-features-value">PCI Express 3.0</td>
        <tr>
        <tr class="spec-features">
            <td class="spec-features-name">DVI-D ports quantity</td>
            <td class="spec-features-value">2</td>
        <tr>
        <tr class="spec-features">
            <td class="spec-features-name">VGA (D-Sub) ports quantity</td>
            <td class="spec-features-value">1</td>
        <tr>
        <tr class="spec-features">
            <td class="spec-features-name">DVI port</td>
            <td class="spec-features-value">2</td>
        <tr>
        <tr class="spec-features">
            <td class="spec-features-name">HDMI ports quantity</td>
            <td class="spec-features-value">1</td>
        <tr>
    </tbody>
</table>
<table class="spec-table">
    <tbody>
        <tr class="spec-name">
            <td>Weight & dimensions</td>
        </tr>
        <tr class="spec-features">
            <td class="spec-features-name">Number of slots</td>
            <td class="spec-features-value">2</td>
        <tr>
    </tbody>
</table>
<table class="spec-table">
    <tbody>
        <tr class="spec-name">
            <td>Video</td>
        </tr>
        <tr class="spec-features">
            <td class="spec-features-name">PhysX</td>
            <td class="spec-features-value">Yes</td>
        <tr>
        <tr class="spec-features">
            <td class="spec-features-name">CUDA</td>
            <td class="spec-features-value">Yes</td>
        <tr>
        <tr class="spec-features">
            <td class="spec-features-name">DirectX version</td>
            <td class="spec-features-value">11</td>
        <tr>
        <tr class="spec-features">
            <td class="spec-features-name">Shader model version</td>
            <td class="spec-features-value">5.0</td>
        <tr>
        <tr class="spec-features">
            <td class="spec-features-name">OpenGL version</td>
            <td class="spec-features-value">4.2</td>
        <tr>
        <tr class="spec-features">
            <td class="spec-features-name">HDMI</td>
            <td class="spec-features-value">Yes</td>
        <tr>
        <tr class="spec-features">
            <td class="spec-features-name">HDMI version</td>
            <td class="spec-features-value">1.4a</td>
        <tr>
        <tr class="spec-features">
            <td class="spec-features-name">Full HD</td>
            <td class="spec-features-value">Yes</td>
        <tr>
        <tr class="spec-features">
            <td class="spec-features-name">Dual Link DVI</td>
            <td class="spec-features-value">Yes</td>
        <tr>
        <tr class="spec-features">
            <td class="spec-features-name">HDCP</td>
            <td class="spec-features-value">Yes</td>
        <tr>
        <tr class="spec-features">
            <td class="spec-features-name">CUDA cores</td>
            <td class="spec-features-value">384</td>
        <tr>
        <tr class="spec-features">
            <td class="spec-features-name">3D Vision</td>
            <td class="spec-features-value">Y</td>
        <tr>
    </tbody>
</table>
<table class="spec-table">
    <tbody>
        <tr class="spec-name">
            <td>Operating system/software</td>
        </tr>
        <tr class="spec-features">
            <td class="spec-features-name">Windows operating systems supported</td>
            <td class="spec-features-value">Yes</td>
        <tr>
        <tr class="spec-features">
            <td class="spec-features-name">Mac operating systems supported</td>
            <td class="spec-features-value">N</td>
        <tr>
        <tr class="spec-features">
            <td class="spec-features-name">Linux operating systems supported</td>
            <td class="spec-features-value">Yes</td>
        <tr>
    </tbody>
</table>
<table class="spec-table">
    <tbody>
        <tr class="spec-name">
            <td>Packaging content</td>
        </tr>
        <tr class="spec-features">
            <td class="spec-features-name">User guide</td>
            <td class="spec-features-value">Yes</td>
        <tr>
    </tbody>
</table>
</body>
</html>

CSS：

* {
    font-family: Helvetica;
}
body {
    width: 700px;
}
.spec-table {
    font-size: 11px;
    width: 330px;
    float: left;
}
.spec-table .spec-name {
    font-weight: bold;
    color: #373333;
    padding-bottom: 20px;
}
.spec-table > tbody > .spec-features {
    color: #4B4B4B;
    width: 60%;
}
.spec-table .spec-features-name {
    padding-left: 10px;
    background: #eee;
    height: 15px;
}
.spec-table .spec-features-value {
    padding-left: 10px;
}
tr > td:first-child {
    width: 200px;
}

これが私のコードを含むjsfiddleです：http：//jsfiddle.net/markasoftware/Na7KB/

score 3 · Accepted Answer

問題は、テーブルをフローティングすることにより、「1行」が常に同じ高さになることです。左側と右側をきれいにしたい場合は、左右の部分を別々のボックスで包んでから浮かせる必要があります。

<div id="left">
    <!-- All your left tables-->
    <table class="spec-table">
        ...
    </table>
    ...
</div>
<div id="right">
    <!-- All your right tables -->
    <table class="spec-table">
        ...
    </table>
    ...
</div>

また、cssを調整します

#left, #right {
    float: left;
}
.spec-table {
    font-size: 11px;
    width: 330px;
}

これが実用的なフィドルです：http：//jsfiddle.net/AQpG6/

score 0 · Accepted Answer

Facebookが彼らのタイムラインでそれをするようにそれをしなさい。左フロートと右フロートを適切に使用します。もちろん、各テーブルの高さをそれぞれ知る必要があります。JavaScriptと左右の2つのクラスでそれを行うことができます。

score 0 · Accepted Answer

いくつかのテーブルをマージして、ギャップなしで表示できます

このようなHTMLくわ

<html>
<head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" type="text/css" href="6.css">
</head>


<body>

<table class="spec-table">
<tbody>
    <tr class="spec-name">
        <td>Technical details</td>
    </tr>
    <tr class="spec-features">
        <td class="spec-features-name">TV tuner integrated</td>
        <td class="spec-features-value">N</td>
    <tr>
    <tr class="spec-features">
        <td class="spec-features-name">Cooling type</td>
        <td class="spec-features-value">active</td>
    <tr>
    <tr class="spec-features">
        <td class="spec-features-name">Form factor</td>
        <td class="spec-features-value">ATX</td>
    <tr>
    <tr class="spec-features">
        <td class="spec-features-name">Number of processors installed</td>
        <td class="spec-features-value">1</td>
    <tr>
    <tr class="spec-features">
        <td class="spec-features-name">Fill rate</td>
        <td class="spec-features-value">28.8 billion texels/sec</td>
    <tr>
    <tr class="spec-features">
        <td class="spec-features-name">Graphics adapter family</td>
        <td class="spec-features-value">NVIDIA</td>
    <tr>
    <tr class="spec-features">
        <td class="spec-features-name">Maximum operating temperature</td>
        <td class="spec-features-value">98 °C</td>
    <tr>

            <tr class="spec-name">
        <td>Memory</td>
    </tr>
    <tr class="spec-features">
        <td class="spec-features-name">Discrete graphics adapter memory</td>
        <td class="spec-features-value">2048 MB</td>
    <tr>
    <tr class="spec-features">
        <td class="spec-features-name">Graphics adapter memory type</td>
        <td class="spec-features-value">DDR3-SDRAM</td>
    <tr>
    <tr class="spec-features">
        <td class="spec-features-name">Memory bus</td>
        <td class="spec-features-value">128 bit</td>
    <tr>
    <tr class="spec-features">
        <td class="spec-features-name">Memory clock speed</td>
        <td class="spec-features-value">1782 MHz</td>
    <tr>
    <tr class="spec-features">
        <td class="spec-features-name">Memory bandwidth (max)</td>
        <td class="spec-features-value">28.5 GB/s</td>
    <tr>


            <tr class="spec-name">
        <td>Weight & dimensions</td>
    </tr>
    <tr class="spec-features">
        <td class="spec-features-name">Number of slots</td>
        <td class="spec-features-value">2</td>
    <tr>


            <tr class="spec-name">
        <td>Operating system/software</td>
    </tr>
    <tr class="spec-features">
        <td class="spec-features-name">Windows operating systems supported</td>
        <td class="spec-features-value">Yes</td>
    <tr>
    <tr class="spec-features">
        <td class="spec-features-name">Mac operating systems supported</td>
        <td class="spec-features-value">N</td>
    <tr>
    <tr class="spec-features">
        <td class="spec-features-name">Linux operating systems supported</td>
        <td class="spec-features-value">Yes</td>
    <tr>
</tbody>
</table>

<table class="spec-table">
<tbody>
    <tr class="spec-name">
        <td>Processor</td>
    </tr>
    <tr class="spec-features">
        <td class="spec-features-name">Graphics processor</td>
        <td class="spec-features-value">GeForce GT 640</td>
    <tr>
    <tr class="spec-features">
        <td class="spec-features-name">Maximum resolution</td>
        <td class="spec-features-value">2560 x 1600 pixels</td>
    <tr>
    <tr class="spec-features">
        <td class="spec-features-name">Graphics processor family</td>
        <td class="spec-features-value">NVIDIA</td>
    <tr>
    <tr class="spec-features">
        <td class="spec-features-name">Processor clock speed</td>
        <td class="spec-features-value">901 MHz</td>
    <tr>
    <tr class="spec-features">
        <td class="spec-features-name">Shader clock</td>
        <td class="spec-features-value">1802 MHz</td>
    <tr>
    <tr class="spec-features">
        <td class="spec-features-name">Graphics adapter RAMDAC</td>
        <td class="spec-features-value">400 MHz</td>
    <tr>
    <tr class="spec-features">
        <td class="spec-features-name">Parallel processing technology support</td>
        <td class="spec-features-value">N</td>
    <tr>
    <tr class="spec-features">
        <td class="spec-features-name">Maximum analog resolution</td>
        <td class="spec-features-value">2048 x 1536 pixels</td>
    <tr>
    <tr class="spec-features">
        <td class="spec-features-name">Maximum digital resolution</td>
        <td class="spec-features-value">2560 x 1600 pixels</td>
    <tr>
    <tr class="spec-features">
        <td class="spec-features-name">Stream processors</td>
        <td class="spec-features-value">384</td>
    <tr>


            <tr class="spec-name">
        <td>System requirements</td>
    </tr>
    <tr class="spec-features">
        <td class="spec-features-name">Mac compatibility</td>
        <td class="spec-features-value">N</td>
    <tr>
    <tr class="spec-features">
        <td class="spec-features-name">Minimum system power supply</td>
        <td class="spec-features-value">350 W</td>
    <tr>
</tbody>


    <tr class="spec-name">
        <td>Ports & interfaces</td>
    </tr>
    <tr class="spec-features">
        <td class="spec-features-name">Interface type</td>
        <td class="spec-features-value">PCI Express 3.0</td>
    <tr>
    <tr class="spec-features">
        <td class="spec-features-name">DVI-D ports quantity</td>
        <td class="spec-features-value">2</td>
    <tr>
    <tr class="spec-features">
        <td class="spec-features-name">VGA (D-Sub) ports quantity</td>
        <td class="spec-features-value">1</td>
    <tr>
    <tr class="spec-features">
        <td class="spec-features-name">DVI port</td>
        <td class="spec-features-value">2</td>
    <tr>
    <tr class="spec-features">
        <td class="spec-features-name">HDMI ports quantity</td>
        <td class="spec-features-value">1</td>
    <tr>

            <tr class="spec-name">
        <td>Video</td>
    </tr>
    <tr class="spec-features">
        <td class="spec-features-name">PhysX</td>
        <td class="spec-features-value">Yes</td>
    <tr>
    <tr class="spec-features">
        <td class="spec-features-name">CUDA</td>
        <td class="spec-features-value">Yes</td>
    <tr>
    <tr class="spec-features">
        <td class="spec-features-name">DirectX version</td>
        <td class="spec-features-value">11</td>
    <tr>
    <tr class="spec-features">
        <td class="spec-features-name">Shader model version</td>
        <td class="spec-features-value">5.0</td>
    <tr>
    <tr class="spec-features">
        <td class="spec-features-name">OpenGL version</td>
        <td class="spec-features-value">4.2</td>
    <tr>
    <tr class="spec-features">
        <td class="spec-features-name">HDMI</td>
        <td class="spec-features-value">Yes</td>
    <tr>
    <tr class="spec-features">
        <td class="spec-features-name">HDMI version</td>
        <td class="spec-features-value">1.4a</td>
    <tr>
    <tr class="spec-features">
        <td class="spec-features-name">Full HD</td>
        <td class="spec-features-value">Yes</td>
    <tr>
    <tr class="spec-features">
        <td class="spec-features-name">Dual Link DVI</td>
        <td class="spec-features-value">Yes</td>
    <tr>
    <tr class="spec-features">
        <td class="spec-features-name">HDCP</td>
        <td class="spec-features-value">Yes</td>
    <tr>
    <tr class="spec-features">
        <td class="spec-features-name">CUDA cores</td>
        <td class="spec-features-value">384</td>
    <tr>
    <tr class="spec-features">
        <td class="spec-features-name">3D Vision</td>
        <td class="spec-features-value">Y</td>
    <tr>


             <tr class="spec-name">
        <td>Packaging content</td>
    </tr>
    <tr class="spec-features">
        <td class="spec-features-name">User guide</td>
        <td class="spec-features-value">Yes</td>
    <tr>

</tbody>
</table>



</body>
</html>

html - 複数のテーブルをフローティング

3 に答える 3

Related

Reference