表格 - 某种colspan？

我现在有点困惑，因为我有CSS代码工作，但它根本不漂亮。我现在想要重写这个CSS样式并通过LESS构建它们。而且我有display:table;/display:table-row;和display:table-cell;的大问题。表格 - 某种colspan？

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

我怎么能做到这一点的是，最后一个单元格（中心）没有上述第二细胞转移到右边？最后一个单元格应该具有上面2个单元格的宽度。某种colspan是需要的。这太奇怪了，因为我有这样的印象，即在我重写代码之前它已经工作了。但是现在右边的所有元素都完全转移了。

来源

2012-03-24 Torben

的可能的复制[DIV表列跨度：怎么了？]（http://stackoverflow.com/questions/4746061/div-table-colspan-how） – naXa 2016-10-25 14:41:26

CSS没有colspan类比。根据您的示例，您可以将最后一行标记为单独的不可分块。

您也可以使用display: table-caption与caption-side: bottom一起将表格行显示为跨越所有列的最后一个“行”。见live demo。

来源

2012-03-24 12:10:34

这不是滥用CSS吗？ – 2012-03-24 12:25:10

你能更具体吗？ – 2012-03-24 12:26:28

是的。每个人都在讨论如何使用非表格数据表格来滥用表格。那么，我想声明我认为使用'display：table-caption'作为非表格标题的记录是CSS滥用。 – 2012-03-24 12:30:43

一个想法是利用绝对定位。在表格周围相对定位一个包装，然后所有的绝对定位变为包装的坐标中心。见下文。注意我定义了一个tableWrapper类，它将被设置为position：relative，然后定义tableRow的类，并且我假设你将设置.tableRow div {display：table-cell; }所以我没有打扰每个div上课。如果高度比第二个div大，你必须找到一种方法来防止它与下面的div重叠。应该是非常可行的。

<div class="tableWrapper"> 
    <div class="tableRow"> 
    <div>Column 1</div> 
    <div>Column 2</div> 
    </div> 

    <div class="tableRow"> 
     <div style="border: 1px solid black; position: absolute; width: 100%;">appears like colspan=2</div> 
     <div>&nbsp; (only here to force a row break before the next table row)</div> 
    </div> 

    <div class="tableRow"> 
    <div>Column 1</div> 
    <div>Column 2</div> 
    </div> 
</div>

来源

2013-12-10 15:39:32

表字幕是一个好主意，如果你需要的页眉和页脚行不管列的宽度...... 绝对定位的作品，除了当你的文本行料比其它电池至少一次更伟大的在那一行...

因此，这里是一个伪解决方案，在响应表的行之间放置标题，并确保根据表标题内容提供换行符（如果表是动态填充的，这很重要）。我还包含一种列跨度，以及（尽管不是行馈送准确）：

CSS：

.table 
{ display:table; 
    position:relative; 
} 
.table > .header 
{ display:table-caption; 
    position:absolute; 
    left:0; 
    right:0; 
} 
.table > .l50{right:50%;} 
.table > .r50{left:50%;} 

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

.table > .row > *{display:table-cell;} 

/* We add an extra cell where neededed to allow or header repositioning using % instead of fixed units */ 
.table > .header + .row > :last-child 
{ width:1%; 
    max-width:1px; 
    overflow:hidden; 
    visibility:hidden; 
} 

.table > .header + .row > :last-child > div 
{ float:left; 
    display:inline; 
    visibility:hidden; 
    width:10000%;/* 100% = parent element width (1%) ⇒ 100*100% = gran-parent element width*/ 
} 
.table > .header + .row > :last-child > div > .l50 
.table > .header + .row > :last-child > div > .r50{width:5000%;} 

/* No responsive line-feed thought it's possible using % to estimate the size the span should take but it's not accurate (see HTML render) */ 
.table > .row > div > .span{position:absolute;left:0;right:33%;} 
/* THIS MAKES SURE TRADITIONAL CELLS ARE VISIBLE */ 
.table > .row > .top 
{ position:relative; 
    z-index:1; 
}

http://jsfiddle.net/sp2U4/

来源

2014-06-16 19:55:04 llange

我找到了解决方案使用jquery和table-layout: fixed。这里是我的小提琴：http://jsfiddle.net/emilianolch/5nvxv5ko/

HTML：

<div class="table"> 
    <div class="table-row"> 
     <div class="table-cell"> 
      top left cell 
     </div> 
     <div class="table-cell"> 
      top right cell 
     </div> 
    </div> 
    <div class="table-row"> 
     <div class="table-cell colspan"> 
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
     </div> 
    </div> 
    <div class="table-row"> 
     <div class="table-cell"> 
      bottom left cell 
     </div> 
     <div class="table-cell"> 
      bottom right cell 
     </div> 
    </div> 
</div>

CSS：

.table { 
    display: table; 
    table-layout: fixed; 
    width: 100%; 
    border-collapse: collapse; 
} 

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

.table-cell { 
    display: table-cell; 
    padding: 5px; 
    border: 1px solid black; 
} 

.table-cell.colspan { 
    display: none; 
    /* collapse border */ 
    margin-top: -1px; 
    margin-bottom: -1px; 
}

JS：

var rowWidth = $('.table-row:first').width(); 
var colWidth = $('.table-cell:first').width(); 
var marginRight = colWidth - rowWidth + 11; 
$('.table-cell.colspan').css('margin-right', marginRight + 'px').show()

来源

2015-06-25 00:42:18 emilianolch

请将小提琴中的代码添加到您的答案中。 – Ram 2015-06-25 01:00:13

使用一个真正的表时，你不得不这样做，以获得你想要的布局。

不使用表格进行布局的唯一必要原因是盲人讲话浏览器给出了每个表格单元格的行号和列号坐标。当表格单元格用于布局时，这迷惑了盲读者。

当然，使用边距，边框和填充比使用表格伪造他们更好的方法是使用边界，边框和填充，但是当您的布局类似于报纸想要的广告页面时，最好使用一个真正的表格，一组嵌套表格或者一个充满div的表格。

我会一直使用div或div在工作时使用显示表部件伪造表格。

当他们不工作，或当div布局崩溃在不同的屏幕分辨率时，我会使用一个真正的表。它永远不会分崩离析。

这个W3C的kludgery会有一个更好的CSS代码解决方案来告诉发言者浏览器不把真正的表视为表。

我还将一个以页表标题为中心的评论表作为表格数据处理，即使它不是数字。表格数据可以包括分类数据。

一个想法是隐藏（具有相同的前景和背景颜色）放弃声明，告诉盲人忽略说话者浏览器提供的表格坐标，因为由于缺乏使布局工作的能力而使用表格与divs。

来源

2016-07-14 23:31:59 midimagic

根据您的需求，flexbox布局可能会完成您正在寻找的内容。

div.table{ 
    display:block; 
    width:100%; 
} 

div.table >div{ 
    display:flex; 
    width:100%; 
    border:1px solid gray; 
    flex-direction:horizonal; 
} 
div.table > div >div{ 
    display: block; 
    flex-grow:1; 
    border-bottom:1px solid #ddd; 
    vertical-align: middle; 
    height:30px; 
    padding:4px; 
}

观看演示：

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

来源

2016-08-22 17:58:32 user3413723

表格 - 某种colspan？

回答

相关问题