相关疑难解决方法(0)

使用display: table-cell是否有一种获取colspan功能的方法,这在使用真实表格单元格时可用？

特别是我需要一些"单元格"来跨越多列.

真正的表是不可能的,因为我使用每行布局的表单,它不会验证为真正的表.

如何在无div.table {display: table;} div.tr {display: table-row;} etc.表(例如)表中实现colspan/rowspan行为？

我现在有点困惑,因为我的CSS代码有效,但它根本不漂亮.我现在想重写这些CSS样式并通过LESS构建它们.我和display:table;/ display:table-row;和我有很大的问题display:table-cell;.

例如,我有以下代码:http://jsfiddle.net/La3kd/2/

我怎么能做到最后一个单元格(中心)不会将上面的第二个单元格向右移动？最后一个单元格应该具有上面2个单元格的宽度.需要一些colspan.这太奇怪了,因为我觉得它在我重新编写代码之前有效.但是现在右边的所有元素都完全转移了.

这项任务很奇怪.我必须创建html表但是我不允许使用传统<table>标签.我的表应该是这样的:

这样做很容易,如下所示:

<table>
     <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
     </tr>
     <tr>
         <td colspan="5"></td>
     </tr>
     ...

但是,正如我所说,我不能用传统的表格标签(table,tr,td,th).这是我目前拥有的JSFIddle.我怎样才能获得与之相同的结果,<td colspan="5"></td> 但只使用div和CSS.

编辑:
*表格单元格在一行中的宽度不能固定,它应该是动态的,应该可以使它们(单元格)的宽度不同(在一行中).
*表格单元格在同一列的不同行中的宽度必须相等.就像传统的桌子一样.只有"colspanned"单元格的宽度必须不同.

我需要两排,第一个有3列第二,我需要跨越就像所有的宽度 td colspan=3会做

或显示:table-cell; 表现得像colspan = 3

我在用 display: table-row; width: 100%;

怎么做到呢 ？

这是我的CSS:

<style>
      .boxer {
         display: table;
         border-collapse: collapse;
      }
      .boxer .box-row {
         display: table-row;
      }
      .boxer .box-row-search {
         display: table-row;
         width: 100%;
      }
      .boxer .box {
         display: table-cell;
         text-align: left;
         vertical-align: top;
         border: 1px solid black;
      }
</style>

我开始更深入地研究CSS,并决定将我的网站的html转换为主要由表格组成的div.

我正在尝试用divs和这个测试页面上的表完成同样的事情.但是我遇到了一些问题:

1. 无法创建列
2. 垂直文本对齐

我走了多远:

码:

 <style type="text/css">


body {
background-color:#000;
}


 /* TABLE CSS */
 td {
    font-family: Tahoma; 
    font-size: 12px;

}
.line {
   border-collapse:separate;
   border:1px solid #222222;
   border-spacing:1px 1px;
   margin-left:auto;
   margin-right:auto;
   background-color: #000000;
   padding: 1px;
   width:400px;

}
.topic {
    background-color:#3C0;
    font-weight: bold;
    height: 23px;
    color:#FFF;
    text-align:center;
}
.row {
    background-color: #111111;

    border-bottom: 1px solid black;
    color: #ffffff;
    height:12px;
    line-height:21px;
    padding:0px; 
}
.row:Hover {
    background-color: #252525;
}

/* DIV CSS */
div.line {
   border-collapse:separate;
   border:1px solid #222222;
   border-spacing:1px 1px; …

我想创建一个HTML的"数字键盘",像一些键盘上找到.我难倒就如何进行布局,而无需使用一个表.

我正在使用Bootstrap(v3.1.1),所以我的第一直觉是尝试使用它的col-类重现键盘上的4列键.这是尴尬的,虽然,我不能轻易得到的按钮的大小是不同层次的嵌套之间是一致的div容器.我失败了.

我知道我可以使用<table>基于布局的方法来轻松实现colspans和rowspans.但它并没有使用该表的布局,因为它显然不是表格数据觉得不对劲.

我试图通过使用CSS display属性的table*值来获得表的好处.这是比我第一次尝试清洁,我使用的类均高于引导那些我试图之前,使用更有意义.不幸的是,我才知道,display:table不支持合并单元格/行跨度.下面是该尝试的的jsfiddle.我试图假一rowspan对tall-keyS按使用height: 144px;但只是增加了全行的高度.

我放弃了,最终创建了一个布局<table>.这是JSFiddle.

有没有办法在不使用HTML的情况下创建数字小键盘<table>？

注:按键的高度可以是静态值(例如70px),但宽度不能.整个的宽度keypad是所述容器的可变百分比,因为响应.