仅使用div元素

时间：2017-07-12 13:55:47

标签： css header tabular

我有一张桌子，我需要添加一个全局标题，如下图所示。 enter image description here

我只使用div而不是table标签。我已经尝试了许多可能性使它工作，但事实并非如此。这是表格的样子。

这是我尝试过的：

.clsDashMap_sumSlideSiteContentSummary {
	position : absolute;
	top: 2rem;
	width: 100%;
	height: 14rem;
	color: #000000;
	text-align: center;
}
.clsDashMap_wrapTableSite {
	display: table;
	width: 100%;
	height: 14rem;
	border: 2px solid;
}
.tableSite_blocLogoCategorie {
	display: table-header-group;
	background-color: gray;
}
.siteLogoCategorie_cell {
	display: table-row;
	text-align: justify;
	padding: 10px;
	border: 2px solid red;
}
.tableSite_blocTitreCategorie {
	display: table-header-group;
	background-color: gray;
}
.siteTitleCategorie_cell {
	display: table-cell;
	text-align: justify;
	padding: 10px;
	border: 2px solid red;
}
.tableSite_blocFMTNT {
	display: table-row-group;
	background-color: gray;
	text-align: center;
}
.blocFMTNT-row {
	display: table-row;
	border: 2px solid;
}
.blocFMTNT-rowTitle {
	display: table-cell;
	text-align: justify;
	padding: 10px;
	border: 2px solid green;
}
.blocFMTNT-value {
	display: table-cell;
	text-align: justify;
	padding: 10px;
	border: 2px solid yellow;
	text-align: center;
	background-color: pink;
}
#pieChartAlm, #pieChartTkt {
	margin: auto;
	width: 5rem !important;
    height: 5rem !important;
}
<div class="clsDashMap_sumSlideSiteContentSummary">
     <div class="clsDashMap_wrapTableSite">
          
                <div class="tableSite_blocLogoCategorie"> 
                    <div class="siteLogoCategorie_cell"> <div style="display: table-header-group;background-color: yellow;"> ALARMES</div></div>
                       <div class="siteTitleCategorie_cell" style="width:2rem;">Criticité</div>
                       <div class="siteTitleCategorie_cell" style="width:2rem;">Sans Sup</div>
                       <div class="siteTitleCategorie_cell" style="width:2rem;">Non Nominale</div>
                    </div>
                 

            <div style="display: table-header-group;background-color: yellow;"> TICKETS</div>
								<div class="tableSite_blocLogoCategorie"> 
                    <div class="siteLogoCategorie_cell">
                       <div class="siteTitleCategorie_cell">En cours</div>
                       <div class="siteTitleCategorie_cell">A suivre</div>
                       <div class="siteTitleCategorie_cell">Clôs</div>
                    </div>
                 </div>
       
            <div style="display: table-header-group;background-color: yellow;"> SITES</div>
								<div class="tableSite_blocLogoCategorie">
                  <div class="siteLogoCategorie_cell">
                        <div class="siteTitleCategorie_cell">Perte HF</div>
                        <div class="siteTitleCategorie_cell">-3DB</div>
                        <div class="siteTitleCategorie_cell">Décrochage HS</div>
                        <div class="siteTitleCategorie_cell">Alarme RX</div>
                        <div class="siteTitleCategorie_cell">GE</div>
                   </div>
                </div>

             <div class="tableSite_blocFMTNT">
               <div class="blocFMTNT-row">
                 <div class="blocFMTNT-rowTitle">TNT</div>
                 <div class="blocFMTNT-value"><canvas id="pieChartAlm" ></canvas></div>
                 <div class="blocFMTNT-value">1.2</div>
                 <div class="blocFMTNT-value">1.3</div>
                 <div class="blocFMTNT-value">1.4</div>
                 <div class="blocFMTNT-value">1.5</div>
                 <div class="blocFMTNT-value">1.6</div>
                 <div class="blocFMTNT-value">1.7</div>
                 <div class="blocFMTNT-value">1.8</div>
                 <div class="blocFMTNT-value">1.9</div>
                 <div class="blocFMTNT-value">1.10</div>
                 <div class="blocFMTNT-value">1.11</div>
               </div>
               <div class="blocFMTNT-row">
                 <div class="blocFMTNT-rowTitle">FM</div>
                 <div class="blocFMTNT-value"><canvas id="pieChartTkt" ></canvas></div>
                 <div class="blocFMTNT-value">2.2</div>
                 <div class="blocFMTNT-value">2.3</div>
                 <div class="blocFMTNT-value">2.4</div>
                 <div class="blocFMTNT-value">1.5</div>
                 <div class="blocFMTNT-value">1.6</div>
                 <div class="blocFMTNT-value">1.7</div>
                 <div class="blocFMTNT-value">1.8</div>
                 <div class="blocFMTNT-value">1.9</div>
                 <div class="blocFMTNT-value">1.10</div>
                 <div class="blocFMTNT-value">1.11</div>
               </div>
             </div>
        </div>
  </div>

1 个答案:

答案 0 :(得分：0)

正如评论中提到的其他人一样，这个真的应该用表元素来处理，但是如果你绝对必须使用div，那么就可以完成（权衡）。

技巧是在该标头的容器div内的标题下包含所有单元格或子标题，并且所有这些单元格或子标题元素都需要显示为内联块。

要实际让它看起来正确，包含元素的最高级别必须将其宽度设置为与其内容完全相同，除非您希望它扩展页面的整个宽度。如果您根本不担心响应式布局和/或单元格中溢出的行为，您可以弄明白（当然要考虑边框，边距和填充）并通过CSS设置它...否则你必须用JS以编程方式设置它并在需要时更新它。

查看this Codepen example I made或此工作的代码片段。

<强>更新

我找到了一个更好，甚至是理想的解决方案，可以提供响应能力。它使用永远精彩但经常被遗忘的：弹性盒子！ 浏览新的代码段（或Codepen）并阅读我已投入的评论以了解其完成情况。 This article也是弹性框表的好资源。

＆＃13;
＆＃13; 
    /* Tables
================================== */
.table-container {
  width: 75%; // Sets table width relative to window width. 
  margin: 0 auto; // Centers table
}

.Rtable {
  display: flex;
  flex-wrap: wrap;
  margin: 0 0 3em 0;
  padding: 0;
  width: 100%;
}

.header-row {
  text-align: center;
  font-size: 1.4em;
}

.header-row h3 {
  margin: 0;
}

.table-row {
  width: 100%;
  display: flex;
}
.Rtable-cell { // This is applied to ALL table cells. 
  box-sizing: border-box; //This takes borders into account for sizing.
  padding: 0.8em 1.2em;
  // Depending on cell content, you may need to change 
  // overflow property, but in some cases, it might break 
  // the flexbox. 
  overflow: hidden;
  outline: solid 2px gray;
  background: lightgray;
}

//  These classes mimic the effect of the colspan attribute
//  IMPORTANT: The number of columns in your table will determine
//    the width percentages to use. 
//    For instance, for a table with 8 columns at the smallest level,
//    a colspan-1 would need to be set to 12.5%, colspan-2 to 25%, and so 
on.
.colspan-1 {
  width: 25%;
}
.colspan-2 {
  width: 50%;
}
.colspan-4 {
  width: 100%;
}

/* Page styling - None of this is particular important to the layout of the 
table.
================================== */
html { 
  height: 100%;
  background-color: #EEE; 
}
body {
  box-sizing: border-box;
  min-height: 100%;
  padding: 2em;
  font-family: 'Josefin Sans', sans-serif;
  background-color: white;
  border: double 3px #DDD;
  border-top: none; border-bottom: none;
}
＆＃13; 
<div class="table-container">
  <div class="Rtable">
    <!-- Breaking things up into rows is ultimately unnecessary 
         but if for any reason a cell were to go missing or an intentded 
row's cells' widths don't add up to 100%, without splitting into rows, the 
flexbox would fill in that gap with whatever cell is next... even if it's on 
the next row. -->
    <div class="table-row header-row">
      <div class="Rtable-cell colspan-4"><h3>I'm at the top level</h3></div>
    </div>
    <div class="table-row header-row">
      <div class="Rtable-cell colspan-2"><h3>I'm a second level header</h3>
      </div>
      <div class="Rtable-cell colspan-1"><h3>Also second level!</h3></div>
      <div class="Rtable-cell colspan-1"><h3>Me too!</h3></div>
    </div>
    <div class="table-row">
      <div class="Rtable-cell colspan-1">Regular cell row 1</div>
      <div class="Rtable-cell colspan-1">Regular cell row 1</div>
      <div class="Rtable-cell colspan-1">Regular cell row 1</div>
      <div class="Rtable-cell colspan-1">Regular cell row 1</div>
    </div>
    <div class="table-row">
      <div class="Rtable-cell colspan-1">Regular cell row 2</div>
      <div class="Rtable-cell colspan-1">Regular cell row 2</div>
      <div class="Rtable-cell colspan-1">I'M JUST A PLAIN OL' CELL</div>
       <div class="Rtable-cell colspan-1">Regular cell row 2</div>
    </div>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题