我正在尝试设置 CSS 表格的样式,以在每行周围绘制一个灰色框,并在每行的灰色/白色背景之间交替。
.table_row_line {
border: 2px solid darkgrey;
width: 100%;
height: 100%;
padding: 5px;
}
<section style="display: table;">
<header class="table_row_line" style="display: table-row;">
<div style="display: table-cell;"></div>
<div style="display: table-cell;"></div>
<div style="display: table-cell;"></div>
</header>
<div style="display: table-row;">
<div style="display: table-cell;"></div>
<div style="display: table-cell;"></div>
<div style="display: table-cell;"></div>
</div>
</section>
这对样式没有任何影响。
我尝试将标题包装在 div 中,这将允许我对其进行样式设置,但它会停止像表格一样运行,并且第一个标题行停止与主要内容对齐。
如何设置此 CSS 表格的样式?
最佳答案
除非边框折叠,否则表格行没有边框,它们只是将表格单元格(可以有边框)固定到位。
设置border-collapse:折叠
。
section {
border-collapse: collapse;
}
.table_row_line {
border: 2px solid darkgrey;
width: 100%;
height: 100%;
padding: 5px;
}
<section style="display: table;">
<header class="table_row_line" style="display: table-row;">
<div style="display: table-cell;">1</div>
<div style="display: table-cell;">2</div>
<div style="display: table-cell;">3</div>
</header>
<div style="display: table-row;">
<div style="display: table-cell;">4</div>
<div style="display: table-cell;">5</div>
<div style="display: table-cell;">6</div>
</div>
</section>
(还要考虑 display: table
是否确实是正确的方法,并询问使用真正的表格、Flexbox 或网格布局是否会更好)。
关于html - 样式显示 : table-row is used 的 CSS 表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56650168/