html+css 通过div模拟出一个表格样式,优化多个边框导致的宽度计算问题

news2025/1/10 20:28:16

html+css 通过div模拟出一个表格样式,优化多个边框导致的宽度计算问题

实现代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    body,
    html {
      width: 100%;
      height: 100%;
    }

    .box {
      width: 600px;
      display: flex;
      flex-wrap: wrap;
      background-color: pink;
      margin: 100px auto;
    }


    .item {
      box-sizing: border-box;
      width: 50%;
      border: 1px solid #000;
      margin: -0.5px;
      height: 40px;
    }
  </style>
</head>

<body>
  <div class="box">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
    <div class="item">7</div>
    <div class="item">8</div>
    <div class="item">9</div>
    <div class="item">10</div>
  </div>
</body>

</html>

效果截图

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1182995.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

json字符串转为开闭区间

1.需求背景 1.1 前端页面展示 1.2 前后端约定交互json 按照页面每一行的从左到右 * 示例 [{"leftSymbol":">","leftNum":100,"relation":"无","rightSymbol":null,"rightNum":0}, {"left…

【Unity细节】VS不能附加到Unity程序中解决方法大全

&#x1f468;‍&#x1f4bb;个人主页&#xff1a;元宇宙-秩沅 hallo 欢迎 点赞&#x1f44d; 收藏⭐ 留言&#x1f4dd; 加关注✅! 本文由 秩沅 原创 &#x1f636;‍&#x1f32b;️收录于专栏&#xff1a;unity细节和bug &#x1f636;‍&#x1f32b;️优质专栏 ⭐【…

Socks5代理怎么样?安全性高吗?

Socks5代理IP的安全性取决于多个因素&#xff0c;包括代理服务器的信任度、代理提供商的可靠性以及你在使用代理时的需要注意一些动作。 下面分享一些关于Socks5代理IP安全性的重要考虑因素&#xff1a; 1. 代理服务器的信任度&#xff1a;使用代理时&#xff0c;您要确保选择信…

【笔记】原型和原型链(持续完善)

概念 原型&#xff1a;函数都具有 prototype 属性&#xff0c;称之为原型&#xff0c;也称之为原型对象 1.1 原型可以放一些属性和方法&#xff0c;共享给实例对象使用&#xff08;也就是原生方法&#xff09;。 1.2 原型可以做继承原型链&#xff1a;对象都有 __proto__ 属性…

「Verilog学习笔记」多功能数据处理器

专栏前言 本专栏的内容主要是记录本人学习Verilog过程中的一些知识点&#xff0c;刷题网站用的是牛客网 分析 注意题目要求输入信号为有符号数&#xff0c;另外输出信号可能是输入信号的和&#xff0c;所以需要拓展一位&#xff0c;防止溢出。 timescale 1ns/1ns module data_…

HR人才测评,采用线上测评做春招秋招

从人力资源管理的工作&#xff0c;已经有好些年了&#xff0c;我只想说这不是一个有创意和创造性的工作&#xff0c;因为大部分时间我都在从事数据方面的工作。关于公司内部的文案工作先且不说&#xff0c;这里分享下我做招聘工作的过程。 每年春秋两季的校招&#xff0c;算是…

安防监控EasyCVR视频汇聚平台使用海康SDK播放时,画面播放缓慢该如何解决?

视频云存储/安防监控EasyCVR视频汇聚平台基于云边端智能协同&#xff0c;支持海量视频的轻量化接入与汇聚、转码与处理、全网智能分发、视频集中存储等。安防视频平台EasyCVR拓展性强&#xff0c;视频能力丰富&#xff0c;具体可实现视频监控直播、视频轮播、视频录像、云存储、…

MySQL数据库调优策略

1. 数据库调优的措施 1.1 调优的目标 尽可能节省系统资源&#xff0c;以便系统可以提供更大负荷的服务。&#xff08;吞吐量更大&#xff09; 合理的结构设计和参数调整&#xff0c;以提高用户操作 响应的速度。&#xff08;响应速度更快&#xff09; 减少系统的瓶颈&#xff0…

抽象工厂模式 rust和java的实现

文章目录 抽象工厂模式介绍抽象工厂模式包含以下几个核心角色&#xff1a;实现架构图java实现rust实现rust代码仓库 抽象工厂模式 抽象工厂模式&#xff08;Abstract Factory Pattern&#xff09;是围绕一个超级工厂创建其他工厂。该超级工厂又称为其他工厂的工厂。 在抽象工…

快速灵敏的Flink2

flink基础知识 TumblingEventTimeWindows 滚动开窗 package org.apache.flink.streaming.api.windowing.assigners;import org.apache.flink.annotation.PublicEvolving; import org.apache.flink.api.common.ExecutionConfig; import org.apache.flink.api.common.typeutils.…

快速了解什么是跳跃表(skip list)

什么是跳跃表&#xff08;skip list&#xff09; 跳跃表&#xff08;Skip List&#xff09;是一种概率性的数据结构&#xff0c;它通过在多层链表的基础上添加“快速通道”来提高搜索效率。跳跃表的效率可以与平衡树相媲美&#xff0c;即在平均和最坏的情况下&#xff0c;查找…

alibaba店铺所有商品数据接口(alibaba.item_search_shop)

阿里巴巴店铺的所有商品数据接口&#xff08;item_search_shop&#xff09;可以获取到店铺内所有商品的信息&#xff0c;包括产品的ID、SKU信息、价格、库存、图片等。这些数据可以用于构建各种业务场景&#xff0c;例如供应链管理、电商平台的价格比较、竞品分析、实时库存查询…

Java练习题一

韩顺平老师的Java练习题 大家可以尝试着做一做 package exer;public class Demo01 {public static void main(String[] args) {double total 100000d;int count0;while(true){if (total > 50000) {total total*0.95;count;}else if (total<50000){total total-1000;co…

最新Next 14快速上手基础部分

最新Next 14快速上手基础部分 最新的NEXT快速上手文档&#xff0c;2023.10.27 英文官网同步&#xff0c;版本Next14.0.0 本项目案例&#xff1a;GitHub地址&#xff0c;可以根据git回滚代码到对应知识&#xff0c;若有错误&#xff0c;欢迎指正&#xff01; 一、介绍 1.什么是…

Flink SQL TopN语句详解

TopN 定义&#xff08;⽀持 Batch\Streaming&#xff09;&#xff1a; TopN 对应离线数仓的 row_number()&#xff0c;使⽤ row_number() 对某⼀个分组的数据进⾏排序。 应⽤场景&#xff1a; 根据 某个排序 条件&#xff0c;计算 某个分组 下的排⾏榜数据。 SQL 语法标准&am…

如何利用JSON Schema校验JSON数据格式

最近笔者在工作中需要监控一批http接口&#xff0c;并对返回的JSON数据进行校验。正好之前在某前端大神的分享中得知这个神器的存在&#xff0c;调研一番之后应用在该项目中&#xff0c;并取得了不错的效果&#xff0c;特地在此分享给各位读者。<br style"box-sizing: …

Moco框架初探

一、简介 Moco是一个搭建模拟服务器的工具&#xff0c;其支持API和独立运行两种方式&#xff0c;前者通常在junit等测试框架中使用&#xff0c;后者则是通过运行一个jar包开启服务。 二、用途 主要用于实现mock技术 1、后端接口开发未完成情况下&#xff0c;通过moco模拟接…

JavaWeb课程复习资料——idea创建JDBC

1、创建空的Java Project 输入项目名称 空项目 2、引入jar包步骤 依次点击 File -> Project Structure&#xff08;快捷键 Ctrl Alt Shift s&#xff09;&#xff0c;点击Project Structure界面左侧的“Modules”如图&#xff1a; 在 【Dependencies】 标签界面下&…

C语言学习笔记之结构篇

C语言是一门结构化程序设计语言。在C语言看来&#xff0c;现实生活中的任何事情都可看作是三大结构或者三大结构的组合的抽象&#xff0c;即顺序&#xff0c;分支&#xff08;选择&#xff09;&#xff0c;循环。 所谓顺序就是一条路走到黑&#xff1b;生活中在很多事情上我们都…

MVCC中的可见性算法

在之前的文章 MVCC详解-CSDN博客中我们已经介绍过了MVCC的原理&#xff08;read viewundo log&#xff09;&#xff0c;今天来详细的说一下readview的匹配规则&#xff08;可见性算法&#xff09; 隔离级别在RC&#xff0c;RR的前提下 Read View是如何保证可见性判断的呢&#…