解决换行造成元素间空隙的问题

最新推荐文章于 2024-07-19 10:49:05 发布

ForMyWebFrontSide

最新推荐文章于 2024-07-19 10:49:05 发布

阅读量2.5k

点赞数

CC 4.0 BY-SA版权

分类专栏： css 文章标签： css

本文链接：https://blog.youkuaiyun.com/ForMyQianDuan/article/details/52062571

css 专栏收录该内容

29 篇文章

订阅专栏

本文介绍了一种使用HTML和CSS实现的简洁表格布局方法。通过内联块元素和边框样式的巧妙运用，解决了传统表格布局中常见的间距问题，使得表格在不同分辨率下都能保持良好的显示效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<style>
    html, body {
        padding: 0px;
        margin: 0px;
    }

    .gd {
        width: 100px;
        height: 20px;
        text-align: center;
        display: inline-block;

        /*background: red;*/
        border-top: 1px solid red;
        border-bottom: 1px solid red;
        border-left: 1px solid red;
        margin:0 -2px;
        /*解决div换行造成的空隙问题*/
    }

    .gd:last-child {
        border-right: 1px solid red;
    }

    .gdWrap {
        border: 1px solid blue;
        width: 506px;
        height: 50px;
        /*overflow-x: auto;*/
    }

    .bWrap {
        width: 350px;
        overflow-x: auto;
        overflow-y: hidden;
        border: 1px solid green;
    }

</style>
<body>
<div class="bWrap">
    <div class="gdWrap">
        <div class="gd">id</div>
        <div class="gd">name</div>
        <div class="gd">type</div>
        <div class="gd">phone</div>
        <div class="gd">addr</div>
    </div>
</div>
</body>