具有不同行高的HTML表

时间：2017-03-27 17:40:43

标签： html5 css3 html-table

我想基于HTML表创建一个网格，其格式如下。

| D | B | D |

| C | A | C |

| D | B | D |

其中：
答：200x200
B：200x20
C：20x200
D：20x20

实现这一目标的最佳方法是什么。或者我应该使用像div这样的其他元素来创建我自己的网格。

修改
每个单元格都有不同类型的内容。有些会有下拉，有些会输入带有几个按钮，而C会有内容垂直翻转（90度）。以下是我正在测试的最新小提琴。

[https://jsfiddle.net/mjawaid/a3ody1wq/16/][1]

2 个答案:

答案 0 :(得分：2)

只为不同的单元格使用不同的类。 JSFiddle：https://jsfiddle.net/yrncor3a/2/

HTML：

<table>
  <tbody>
    <tr>
      <td class="d">D</td>
      <td class="b">B</td>
      <td class="d">D</td>
    </tr>
    <tr>
      <td class="c">C</td>
      <td class="a">A</td>
      <td class="c">C</td>
    </tr>
    <tr>
      <td class="d">D</td>
      <td class="b">B</td>
      <td class="d">D</td>
    </tr>
  </tbody>
</table>

和CSS：

td{
  border: 1px solid #666;
  text-align: center;
}
.a{
  width:200px;
  height:200px
}
.b{
  width: 200px;
  height: 20px;
}
.c{
  width: 20px;
  height: 200px;
}
.d{
  width: 20px;
  height: 20px;
}

答案 1 :(得分：2)

在网络文档中生成类似于表格的网格布局有 6种可能的方法：

  • 使用HTML表的网格
  • 使用CSS绝对定位的网格
  • 使用CSS Floats的网格
  • 使用CSS2表的网格
  • 使用CSS3 Flexbox的网格
  • 使用CSS3网格的网格

使用HTML表格的网格

您可以将表格单元格的默认维度建立为20 x 20，然后再添加两个CSS声明来指示width需要200的位置以及height的位置需要200。

工作示例：

＆＃13;
＆＃13; 
td {
width: 20px;
height: 20px;
line-height: 20px;
font-size: 8px;
text-align: center;
font-weight: bold;
border: 1px solid rgb(0, 0, 0);
}

tr:nth-of-type(1) td:nth-of-type(2),
tr:nth-of-type(3) td:nth-of-type(2) {
width: 200px
}

tr:nth-of-type(2) td {
height: 200px
}

tr:nth-of-type(2) td:nth-of-type(odd){
writing-mode: vertical-rl;
}
＆＃13; 
<table>
<tr>
<td>20x20</td>
<td>200x20</td>
<td>20x20</td>
</tr>

<tr>
<td>20x200</td>
<td>200x200</td>
<td>20x200</td>
</tr>

<tr>
<td>20x20</td>
<td>200x20</td>
<td>20x20</td>
</tr>
</table>
＆＃13;
＆＃13;
＆＃13;

使用CSS绝对定位的网格

要单独使用CSS复制类似于表格的布局（并且不使用CSS表格），您还可以将元素绝对放置在相对定位的父元素中。

工作示例：

＆＃13;
＆＃13; 
div {
position: relative;
}

div > div {
position: absolute;
width: 20px;
height: 20px;
font-size: 8px;
line-height: 20px;
text-align: center;
font-weight: bold;
border: 1px solid rgb(0, 0, 0);
}

div > div:nth-of-type(n) {
top: 0;
}

div > div:nth-child(n+4) {
top: 23px;
height: 200px;
}

div > div:nth-of-type(n+7) {
top: 226px;
height: 20px;
}

div > div:nth-of-type(3n-2) {
left: 0;
}

div > div:nth-of-type(3n-1) {
left: 23px;
width: 200px;
}

div > div:nth-of-type(3n){
left: 226px;
}

div > div:nth-child(4),
div > div:nth-child(6) {
writing-mode: vertical-rl;
}

div > div:nth-child(5) {
line-height: 200px;
}
＆＃13; 
<div>
<div>20x20</div>
<div>200x20</div>
<div>20x20</div>
<div>20x200</div>
<div>200x200</div>
<div>20x200</div>
<div>20x20</div>
<div>200x20</div>
<div>20x20</div>
</div>
＆＃13;
＆＃13;
＆＃13;

使用CSS Floats

的网格

CSS绝对定位的替代方案（由于您不需要给出每个元素的坐标，因此需要比绝对定位更少的微调）是使用CSS浮点数。

工作示例：

＆＃13;
＆＃13; 
div {
display: block;
width: 252px;
height: 252px;
text-align: center;
font-size: 8px;
font-weight: bold;
}

div > div {
float: left;
width: 20px;
height: 20px;
line-height: 20px;
border: 1px solid rgb(0, 0, 0);
margin: 1px;
}

div:nth-of-type(3n-1) {
width: 200px;
}

div:nth-of-type(n+4):nth-of-type(-n+6) {
height: 200px;
}

div > div:nth-child(4),
div > div:nth-child(6) {
writing-mode: vertical-rl;
}

div:nth-of-type(5) {
line-height: 200px;
}
＆＃13; 
<div>
<div>20x20</div>
<div>200x20</div>
<div>20x20</div>
<div>20x200</div>
<div>200x200</div>
<div>20x200</div>
<div>20x20</div>
<div>200x20</div>
<div>20x20</div>
</div>
＆＃13;
＆＃13;
＆＃13;

使用CSS2表格的网格

经常被忽视的是，CSS2 Tables通常可以替代HTML表格。

为什么呢？因为display: table因为它们只显示为表格。当您将响应式设计放在一起时，只要需要将这些元素显示为block或inline-block或其他任何内容，这些元素就会停止显示。

HTML表因不适合使用较小的屏幕尺寸而闻名。但是，正如您从下面的示例中看到的，CSS表可以很容易地将自身（在CSS @media查询中）从表格转换为垂直列表或幻灯片放映或您想要的任何其他内容。

工作示例：

＆＃13;
＆＃13; 
.table {
display: table;
font-size: 8px;
line-height: 20px;
text-align: center;
font-weight: bold;
border-spacing: 1px 1px;
}

.table > div {
display: row;
}

.table > div > div {
display: table-cell;
width: 20px;
height: 20px;
border: 1px solid rgb(0, 0, 0);
}

.table > div > div:nth-of-type(2) {
width: 200px;
}

.table > div:nth-of-type(2) > div {
height: 200px;
vertical-align: middle;
}

.table > div:nth-of-type(2) > div:nth-of-type(odd) {
writing-mode: vertical-rl;
}
＆＃13; 
<div class="table">

<div>
<div>20x20</div>
<div>200x20</div>
<div>20x20</div>
</div>

<div>
<div>20x200</div>
<div>200x200</div>
<div>20x200</div>
</div>

<div>
<div>20x20</div>
<div>200x20</div>
<div>20x20</div>
</div>

</div>
＆＃13;
＆＃13;
＆＃13;

使用CSS3 Flexbox的网格

我们在这里处理具有特定尺寸和坐标的明确定义的网格，因此Flexbox可能不是正确的方法。

尽管如此，如果不是复杂的下一代CSS Floats继承者，Flexbox也不算什么。所以 - 正如您可以使用浮点数创建类似于表格的网格布局一样 - 您也可以使用 CSS3 Flexbox 。

＆＃13;
＆＃13; 
div {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-content: center;
width: 252px;
height: 252px;
line-height: 20px;
font-size: 8px;
font-weight: bold;
}

div > div {
width: 20px;
height: 20px;
margin: 1px;
border: 1px solid rgb(0, 0, 0);
}

div > div:nth-of-type(3n-1) {
flex: 0 0 200px;
}

div > div:nth-of-type(n+4) {
height: 200px;
}

div > div:nth-of-type(n+7) {
height: 20px;
}

div > div:nth-of-type(4),
div > div:nth-of-type(6) {
writing-mode: vertical-rl;
}
＆＃13; 
<div>
<div>20x20</div>
<div>200x20</div>
<div>20x20</div>
<div>20x200</div>
<div>200x200</div>
<div>20x200</div>
<div>20x20</div>
<div>200x20</div>
<div>20x20</div>
</div>
＆＃13;
＆＃13;
＆＃13;

使用CSS3网格的网格

最后...... 我们一直在等待的那个 - CSS3网格。

工作示例：

＆＃13;
＆＃13; 
div {
display: grid;
grid-template-columns: 20px 200px 20px;
grid-template-rows: 20px 200px 20px;
grid-gap: 2px;
font-size: 8px;
font-weight: bold;
}

div > div {
display: block;
border: 1px solid rgb(0, 0, 0);
text-align: center;
line-height: 20px;
}

div > div:nth-of-type(4),
div > div:nth-of-type(6) {
writing-mode: vertical-rl;
}

div > div:nth-of-type(5){
line-height: 200px;
}
＆＃13; 
<div>
<div>20x20</div>
<div>200x20</div>
<div>20x20</div>
<div>20x200</div>
<div>200x200</div>
<div>20x200</div>
<div>20x20</div>
<div>200x20</div>
<div>20x20</div>
</div>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题