html - float 多个表

标签 html css html-table css-float

我的 table 有点卡住了。我总是在两张 table 之间留下一个间隙，我想将其删除。谁能解释一下如何消除两个垂直表格之间的间隙？

这是我所看到的和不正确的示例(差距):

enter image description here

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/

最佳答案

问题是，通过 float 表格，“一行”始终具有相同的高度。 如果你想让它们的左边和右边都干净，你必须将左边和右边的部分包裹在单独的盒子里，然后将它们 float 。

<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;
}

这是一个工作 fiddle :http://jsfiddle.net/AQpG6/

关于html - float 多个表，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15602906/

上一篇：javascript - 为什么使用jquery的html可以运行脚本，但使用innerHTML却不能运行脚本？

下一篇：jQuery 使动画仅在单击时发生一次

相关文章：

javascript - 当ImageData不可用时如何提供正确的数据？

html - 如何在 flexbox 中居中和转 Angular flex 元素？

CSS 转换在 css 转换中不起作用？

php - 如何选择所有行的 HTML 表格

html - 放大页面时，标题和文本隐藏在我的 slider 后面

javascript - Angular 2 应用程序和静态 html 页面之间共享的 Material Design CSS/JS

jquery - 为 Javascript 和 jQuery 函数创建函数

jquery - 如何在使用 JQuery 悬停另一个元素时隐式悬停两个元素？

php - 根据组在表中显示数据

html - 如何根据下一个 sibling 的高度自动调整DIV高度？

©2024 IT工具网  联系我们