在原生js中的，table表格，display：block之后，样式混乱

display:block

display:block是可以把非块级元素强制转换为块级元素显示，如内嵌元素span，原来不支持设置宽高，宽度是由内容撑开的;

display:table-row

table-row:指定对象作为表格行，类同于html标签<tr>

问题如下

当表格为多列的情况下，属性为"display:block"行的内容宽度仅与第一列宽度相同，也就是说无论你使colspan的属性值为多少，剩余列的空间都不进行解析

新闻的内容只能占一列的宽度

当将display:table-row,问题解决

display 属性值如下

none    此元素不会被显示。
block    此元素将显示为块级元素，此元素前后会带有换行符。
inline    默认。此元素会被显示为内联元素，元素前后没有换行符。
inline-block    行内块元素。（CSS2.1 新增的值）
list-item    此元素会作为列表显示。
run-in    此元素会根据上下文作为块级元素或内联元素显示。
compact    CSS 中有值 compact，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。
marker    CSS 中有值 marker，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。
table    此元素会作为块级表格来显示（类似 <table>），表格前后带有换行符。
inline-table 此元素会作为内联表格来显示（类似 <table>），表格前后没有换行符。
table-row-group    此元素会作为一个或多个行的分组来显示（类似 <tbody>）。
table-header-group 此元素会作为一个或多个行的分组来显示（类似 <thead>）。
table-footer-group    此元素会作为一个或多个行的分组来显示（类似 <tfoot>）。
table-row    此元素会作为一个表格行显示（类似 <tr>）。
table-column-group    此元素会作为一个或多个列的分组来显示（类似 <colgroup>）。
table-column    此元素会作为一个单元格列显示（类似 <col>）
table-cell    此元素会作为一个表格单元格显示（类似 <td> 和 <th>）
table-caption    此元素会作为一个表格标题显示（类似 <caption>）
inherit    规定应该从父元素继承 display 属性的值。

在原生js中的，table表格，display：block之后，样式混乱相关推荐

【第48天】AJAX在原生JS中的使用，处理XML数据以及DBUtils的使用，假删除（标记删除）
1 介绍 1.1 同步和异步 1.1.1 基于AJAX的异步传输与传统同步传输的对比 1.1.2 使用时间线表示同步和异步在过程上的区别 1.2 JS与AJAX的关系 1.3 AJAX用到的技术 1. ...
html遍历table tr,js中获取 table节点各tr及td的内容简单实例
js中获取 table节点各tr及td的内容简单实例 2019-01-06 编程之家 https://www.jb51.cc 编程之家收集整理的这篇文章主要介绍了js中获取 table节点各tr及td ...
Vue中对Table表格中的输入项进行校验
项目开发中,经常会遇到的场景:对table表格的输入项字段进行校验,同时提交时整体校验. 这个坑真的爬了好久,几个需求做完了,校验也没实现,挫败!后来看到一个博主Element UI from实现校验 ...
原生js中nextSibling和nextElementSibling的坑
作者:拓海老师,公众号:拓海老师一直以来js的随性让初学者蛋疼菊紧,但是真正玩熟了之后,还是非常有意思的! 今天拓海老师跟大家说一下原生js中获取元素的下一个直接兄弟元素的坑! 业务场景:点击当前元 ...
原生js中如果有多个onload事件解决方案
原生js中如果有多个onload事件解决方案参考文章: (1)原生js中如果有多个onload事件解决方案 (2)https://www.cnblogs.com/happy-8090/p/11830 ...
Element-UI中关于table表格的那些骚操作
最近的项目中使用到element-ui组件库,由于做的是后台管理系统,所以经常需要操作表格,编辑样式的过程中遇到一些问题,官网针对table给出了很多的api,自己可以自定义,基本能满足产品需求,但是 ...
【温故知新】——原生js中常用的四种循环方式
一.引言本文主要是利用一个例子,讲一下原生js中常用的四种循环方式的使用与区别: 实现效果: 在网页中弹出框输入0 网页输出"欢迎下次光临" 在网页中弹出框输入1 网页输 ...
原生js中attributes属性
原生js中attribute属性 <div id="box" title="盒子" class="big"></div&g ...
原生JS中DOM节点相关API合集
原生JS中DOM节点相关API合集节点属性 Node.nodeName //返回节点名称,只读 Node.nodeType //返回节点类型的常数值,只读 Node.nodeValue //返回Te ...
HTML中的table表格布局
HTML中的table表格布局熟练掌握table表格的布局方法,有利于我们今后设计出更加工整美观的页面,是我们学习HTML必不可少的一部分,下面我将列出table表格的几种常用的方法. 一.tabl ...

在原生js中的，table表格，display：block之后，样式混乱

在原生js中的，table表格，display：block之后，样式混乱相关推荐

最新文章

热门文章