表格 - 某種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？

回答

相關問題