使用CSS

Question

我想创建类似 using divs 的内容，它也应该不使用display:table css规则等。如何创建表头？

Answer 1

可以试试这个作为起点吗？您可能需要对它进行大量调整。

＆＃13;

＆＃13;

* {box-sizing: border-box;}
.row {overflow: hidden; clear: both;}
.cell {border: 1px solid #999; padding: 0px; float: left;}
.cell.full {float: none;}
.col-1 {width: 20%;}
.col-2 {width: 40%;}
.col-3 {width: 60%;}
.col-33 {width: 33.3%;}
.row-2 {height: 3em;}

＆＃13;

<div class="row">
  <div class="cell col-1 row-2">Subject</div>
  <div class="cell col-3 row-2">
    <div class="row">
      <div class="cell full">First Term</div>
    </div>
    <div class="row">
      <div class="cell col-33">October Test</div>
      <div class="cell col-33">December Exam</div>
      <div class="cell col-33">Term Average</div>
    </div>
  </div>
  <div class="col-1 row-2 cell">Teacher's Evaluation</div>
</div>

＆＃13;

＆＃13;

＆＃13;

预览

Answer 2

如果您可以使用flexbox can i use flexbox

使用flexbox的好处是，您可以获得与使用table标记（包括vertical-align:middle）相同的结果。

在代码段中，请注意单元格中的文本对齐方式。

您可以像这样使用flexboxgrid：

[class*="col"] {
  text-align:center;
  border:1px solid;
  display: flex;
  justify-content: center;
  flex-direction: column;
}

<link href="http://cdn.jsdelivr.net/flexboxgrid/6.3.0/flexboxgrid.min.css" rel="stylesheet" />
<div class="row ">
  <div class="col-xs-3">Subject</div>
  <div class="col-xs-6">
    <div class="row">
      <div class="col-xs-12">First Term</div>
    </div>
    <div class="row">
      <div class="col-xs-4">October Test</div>
      <div class="col-xs-4">December Exam</div>
      <div class="col-xs-4">Term Average</div>
    </div>
  </div>
  <div class="col-xs-3">Teacher's Evaluation</div>
</div>

结果：

http://jsbin.com/zetaro/edit?html,css,output

Answer 3

只需使用colspan和rowspan =） tutorial how to do it

我做到了：

table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}

<table>
  <tr>
    <th rowspan="2"><br>Subject<br></th>
    <th colspan="3">First term</th>
    <th rowspan="2">Teacher's Evaluation</th>
  </tr>
  <tr>
    <td>October test</td>
    <td>December exam</td>
    <td>Term Average</td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>

https://jsfiddle.net/b3aqLny1/

Answer 4

试试这个

.table {
  width: 100%;
  table-layout: fixed;
  display: table;
  text-align: center;
}

.table .row{
  display: table-row;
}

.table .row .col {
  display: table-cell;
  vertical-align: middle;
  height: 100px;
  border: 2px solid #333;
  width: 33%;
}

.table .col.col-big {
  width: 50%;
}

span {
  display: inline-block;
  padding: 10px;
}

.inner-table.table .row .col {border-width: 1px;}

<div class="table">
	<div class="row">
		<div class="col">
			<span>Subject</span>
		</div>
		<div class="col col-big">
			<div class="table inner-table">
				<div class="row">
					<div class="col one-col" style="width: 100%">
						<span>First Term</span>
					</div>
				</div>
				<div class="row">
					<div class="table inner-table">
					  <div class="row">
					    <div class="col"><span>Test 1</span></div>
              <div class="col"><span>Test 2</span></div>
              <div class="col"><span>Test 3</span></div>
					  </div>
					</div>
				</div>
			</div>
		</div>
		<div class="col">
			<span>Teacher's Evaluation</span>
		</div>
	</div>
</div>