Question

我尝试使用CSS表，这是我简单的html结构：

SELECT REGEXP_REPLACE(
                      phone,
                      '(\+|00)([0-9][0-9])([0-9]*)',
                      '+\2'
                     ) AS AREA,
       REGEXP_REPLACE(
                      phone,
                      '(\+|00)([0-9][0-9])([0-9]*)',
                      '\3'
                     ) AS PHONE
  FROM (SELECT '003323658568526' phone FROM DUAL
        UNION ALL
        SELECT '+3323658568526' phone FROM DUAL);

但是这里的技巧，我设置我的＃header-group与display：table-header-group（对于table-row相同）。而他的孩子的行为就像一个显示器：table-cell。但是我希望他能够占据他父母的整个宽度。在html中，这将是一个colspan属性。但是有没有办法在CSS中做到这一点？

您可以在此链接上看到此行为（红色应占据整个宽度）： http://codepen.io/anon/pen/rxpBye

干杯，

Answer 1

Helo H4mm3r，

我只使用<div id="container">包裹属性为display:block的黄色和绿色单元格。

div#main-table {
  display: table;
}

div#header-group {
  background: red;
 display: table-header-group;
}

#container{
  display:block;
}

div#content, div#aside {
  display: table-cell;
}

div#content {
  background: yellow;
}

div#aside {
  background: green;
}

<div id="main-table">
  <div id="header-group">
    <h1>This is a test</h1>
  </div>
  <div id="container">
  <div id="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sustulisti detraxisse reperietur perfruique inpendente delectamur admonere plato remissius. Praetor corporis nutu debilitatem seditiones illis, certissimam quia ignorare referri aliquos privatione maximam chrysippi, mnesarchum veniat habere solemus electram verterunt pluribus, iudex magnopere cn ac duxit conformavit attico expetitur, confirmare insidiarum plena acri patiatur liberae. Numquam clariora, volunt.</div>
  <div id="aside">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Gaudere similia nam suscipit cedentem dictas. Satis.</div>
</div>

Answer 2

试试这个：

div#header-group {
    background: red;
    display: table-caption;
}

CSS显示表和colspan

2 个答案: